backface-visibility: hidden;を指定した要素をtranslate3dでアニメーションさせようとするとIE11以下でうまく動かない

表題の通りですが、backface-visibility: hidden;を指定した要素をtranslate3dでアニメーションさせようとするとIE11以下でうまく動きません。

問題の発生例

AD

問題が起きるコード

たとえばこんなHTMLがあったとして

ボタンをクリックするとdiv.itemがアニメーションするような処理を行ったとします。

Javascriptはクラスをトグルするだけで

アニメーションをtransitionとtransformで実装します。

これでChromeやEdgeは問題ないのですが、IE11だけアニメーションせずdiv.itemが一旦消えてから右側200pxの位置に現れます。

translate3dを使用した場合のみに発生し、translateXやleftなどの場合は問題ありません。

回避策

backface-visibilityは、Chromeでマウスオーバー時にopacityを変化させる処理で1pxズレる、という不具合を回避するためによく使われます。

【CSS】transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する

面倒なので全称セレクタで以下のようにぶっ込んでしまいがちですが、

transform3dが絡む要素は避けて指定するといいのではないかと思います。

スライドショー系のjQueryプラグインでもtranslate3dはよく使われていますので注意が必要です。

まとめ

またIEか…

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。