Chart.jsのグラフがiPhoneではチラつく
Chart.jsを使ってグラフ（棒グラフでも円グラフでも）をWebブラウザに表示させたときのこと。WindowsやMac OS上のブラウザではhoverしてもclickしてもcanvas領域の表示は問題ないのだけど、iOS上のSafariやChromeで同様のことをしてみると、一瞬canvas領域がグレー（タップ動作によるハイライト？）になってチラついてしまう現象が起きた。
Android上のブラウザでは問題ないので、iOS固有の問題なのかなと思って調べてみると、styleの -webkit-tap-highlight-colorプロパティをtransparentにすることで解決できた。
<canvas id="sampleChart" width="400" height="400" style="-webkit-tap-highlight-color: transparent">
このスタイル指定にはベンダープリフィックスwebkitが付いているので、SafariやChromeにしか効かないのかな？と思ったけど、iOSのFirefoxからアクセスしてみるとチラつかずに表示できたので、ひとまずこの書き方でいってみよう。
