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

製作 プログラム

最終更新日:2019/06/30

ラムネグから一言:寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.

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が2D表示にもなんらかの影響があるようで、このように「隠す」の設定にすることでバグが解消される、と。

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

まとめ

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

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

【おしらせ、というか完全なる宣伝】

文体がもうぜんぜん適当すぎてあれだけどものすごい自由に書いてるブログ「檸檬だくだく」もよろしく.寝る前に読める恐ろしくくだらないやつです.

こんなにも一ミリも目を引かれないタイトルを取り扱ってます: 続・マーガリン問題 / 爆弾岩についての考察 / 毎月5のつく日は /