Blog

ブログ

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

  • Web制作
  • 記事公開日:
CSS Transformsで画面がちらつくときの対処法

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

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

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

3つの対処法

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

「-webkit-backface-visibility:hidden;」と「backface-visibility:hidden;」を指定

これがいちばん効果の高い対処方法です。ほとんどのちらつき問題が解消されます。2D Transformsには関係ないプロパティのはずなのですが、なぜか有効な対策です。

「-webkit-backface-visibility:hidden;」と「backface-visibility:hidden;」と「overflow:hidden」を指定

「backface-visibility:hidden;」を指定しても問題が起きるときには、「overflow:hidden」を両方指定しておけばひとまず問題が解消できる確率が高まります。
「backface-visibility」は、ベンダープリフィックスは必須です。

要素を隠すときには「visibility:hidden;」を指定

Off Canvasなど、非表示にする要素があるときにも注意が必要です。要素を非表示にするときには「visibility:hidden;」を指定し、表示するときには「visibility:visible;」を指定するだけでもちらつきが防止できます。

対策する場所にも注意

ちらつく現象は、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さまが本格的に使いだしてきているので、勉強が必要だと思います。

このページを共有

関連記事

この記事を読んだ人はこの記事も読んでいます

  1. 脱Adobe。次世代ソフトたちでWebデザインの仕事をしてみた - 課題篇
    脱Adobe。次世代ソフトたちでWebデザインの仕事をしてみた - 課題篇
  2. MAMP+VMWareの環境設定メモ(Mountain Lion篇)
    MAMP+VMWareの環境設定メモ(Mountain Lion篇)
  3. 脱Adobe。次世代ソフトたちでWebデザインの仕事をしてみた - 素材篇
    脱Adobe。次世代ソフトたちでWebデザインの仕事をしてみた - 素材篇
ページの上部に戻る