CSS3 アニメーション時のチラツキ問題

Safari(5.1.10) で jQuery plugin bxSlider(v4.1.1) のサムネイルページャーのマウスオーバー時に CSS で透過アニメーションを適用すると、アニメーション完了時にチラツキが発生した。

bxSlider がサムネイルのリストタグに追加する -webkit-transformtranslate3d が原因らしく、マウスオーバーの透過アニメーション処理のスタイル指定にも -webkit-transformtranslate3d を追加することでチラツキの発生を抑止することができた。

translate3d を指定することで、GPUアクセラレーションが有効になるために解決するらしい。

-webkit-transform: translate3d(0, 0, 0);

参考サイト

«
»