ブログ

CSS Transformsで画面がちらつくときの対処法

CSS TransformsでCSS Animation/Transitionと組み合わせて、要素を移動させたり、拡大縮小させるとちらつくことがあります。そのときの対処法を記載します。ちなみに、ちらつく現象は別にiOSのSafariの専売特許ではありません。PCやモバイル端末に関係なく発生します。

CSS Transformsで画面がちらつくときって?

CSS TransformsでCSS Animation/Transitionと組み合わせて、要素を移動させたり、拡大縮小させるとちらつくことがあります。背景色を指定しても発生することがあります。また、一部の子要素だけちらつくこともあります。ちなみに、CSS 2D Transformsを指定した要素でもちらつきが発生するときがあります。

3つの対処法

このような現象が起きたら、3つの対処方法があります。

対策する場所にも注意

ちらつく現象は、CSS Transformsを指定している場所で発生するとは限りません。ちらつく現象が発生する場所に最低限「backface-visibility:hidden;」を指定する必要があります。
検証している限りだと、どうも背景色を指定している要素にちらつきが発生するときが多いです。

CSS Transformsと相性が悪い-webkit-font-smoothing

WebKit系ブラウザ(Safari)で利用できるアンチエイリアス制御のCSSである「-webkit-font-smoothing」というプロパティがあります。

この「-webkit-font-smoothing」の指定がCSS Transformsと相性がよくありません。文字が汚くレンタリングされます。

まとめ

とりあえず、このサイトで使っている対策を書いてみました。
「backface-visibility:hidden;」はかなり効果的ですが、フォントレンタリングに影響を与えますので使う場所に注意が必要です。

CSS 3D Transformsは取り入れていくのにまだまだノウハウが必要なところがあります。しかし、Googleさまが本格的に使いだしてきているので、勉強が必要だと思います。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。