読者です 読者をやめる 読者になる 読者になる

Chart.jsのグラフがiPhoneではチラつく

Chart.jsを使ってグラフ(棒グラフでも円グラフでも)をWebブラウザに表示させたときのこと。WindowsMac OS上のブラウザではhoverしてもclickしてもcanvas領域の表示は問題ないのだけど、iOS上のSafariChromeで同様のことをしてみると、一瞬canvas領域がグレー(タップ動作によるハイライト?)になってチラついてしまう現象が起きた。

Android上のブラウザでは問題ないので、iOS固有の問題なのかなと思って調べてみると、styleの -webkit-tap-highlight-colorプロパティをtransparentにすることで解決できた。

<canvas id="sampleChart" width="400" height="400" style="-webkit-tap-highlight-color: transparent">

 

このスタイル指定にはベンダープリフィックスwebkitが付いているので、SafariChromeにしか効かないのかな?と思ったけど、iOSFirefoxからアクセスしてみるとチラつかずに表示できたので、ひとまずこの書き方でいってみよう。

 

 

参考Webページ