CSS3 アニメーション時のチラツキ問題
2013年10月26日
Safari(5.1.10) で jQuery plugin bxSlider(v4.1.1) のサムネイルページャーのマウスオーバー時に CSS で透過アニメーションを適用すると、アニメーション完了時にチラツキが発生した。
bxSlider がサムネイルのリストタグに追加する -webkit-transform の translate3d が原因らしく、マウスオーバーの透過アニメーション処理のスタイル指定にも -webkit-transform の translate3d を追加することでチラツキの発生を抑止することができた。
translate3d を指定することで、GPUアクセラレーションが有効になるために解決するらしい。
-webkit-transform: translate3d(0, 0, 0);