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

2017
11/21

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

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

問題の発生例

ADs

問題が起きるコード

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

1
2
3
4
5
6
<div class="module module01">
<button>動く！</button>
<div class="item">
translate3dで動く
</div>
</div>

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

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

1
2
3
$('button').on('click',function(){
$(this).next('div').toggleClass('move');
});

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

1
2
3
4
5
6
7
.item {
backface-visibility: hidden;
transition: 1s;
}
.item.move {
transform: translate3d(200px,0,0);
}

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

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

回避策

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

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

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

1
2
3
* {
backface-visibility: hidden;
}

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

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

まとめ

またIEか…

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

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

Category

Archive

Search

Social