CSSのtransform:scaleで画像がちらつくときの対処法【解決済み】

scaleで画像がちらつく

cssのtransform:scaleを使うと、画像を拡大したり小さくしたりいろんな動きがだせます。多くの場合、transitionとhoverと一緒に使ってマウスオーバー時に画像を少しずつ大きくしたりすることが多いですよね。

今回bloggerテンプレートのQooQ（配布中です！ぜひ使ってみてね！）をいじっている中で、scaleを適用した画像がちらつくバグに出くわしました。

ということでここではcssでscaleを使うと画像がちらつく、画像が動きはじめにほんの少し小さくなるバグの対処法を紹介します。

※この現象はChromeでのみ発生するバグのようです。

1. scaleで画像がちらつく
2. 画像をinline-blockにする
3. それでも治らないなら
4. まとめ

画像をinline-blockにする

いきなり解決方法から。

transform:scaleで拡大縮小する画像をinline-blockにすると画像のちらつきだったり動き始めに微妙に小さくなる現象が治ります。

画像（img要素）はもともとインラインブロック要素なので、そこをcssでブロック要素にしているとscaleするときになにか不具合があるみたいです。

それでも治らないなら

scaleする画像をinline-blockにすれば解決することが多いと思いますが、いろんなケースがあるのでもっともよく紹介されている解決法も紹介しておきますね。

scaleを使うと画像がちらついたり、画像が動きはじめに微妙に小さくなる現象に対する一番ポピュラーな対策は、

-webkit-backface-visibility:hidden;
backface-visibility:hidden;

これをtransformしている要素に追加する、という対策です。

backface-visibilityは3D表示を制御するcssプロパティ。cssで立体の正方形とかを作ることができるんですが、そのとき裏側に隠れる部分も表示するかどうかを設定できます。

今回はhidden、つまり隠すにしています。（サイコロを肉眼でみると最大で3面しかみえないですよね。なのでそもそも見えてない残りの3面はそもそも表示しない、という設定です。）

transform:scaleは”2D”の拡大縮小なので本来は3Dのcssプロパティは関係ないはず…なんです。

ただ、どうやら3Dのcssプロパティであるbackface-visibilityが２D表示にもなんらかの影響があるようで、このように「隠す」の設定にすることでバグが解消される、と。

ちなみにわたしはこちらの方法では画像のちらつきは解決しませんでした。

まとめ

今回はcssのtransform:scaleをつかったとき、画像がちらついたように見える、動きはじめに一瞬小さくなるバグの解決方法を紹介しました。

画像に対してinline-blockを設定してあげれば治りますので、一度試してみてくださいね。