Blog

ブログ

Safari 8で​CSS transformを​指定した時に​ちらつくときの​解消法

  • Web制作
  • 記事公開日:
Safari 8でCSS transformを指定した時にちらつくときの解消法

MarvericksからYosemiteになりました。Safariもバージョン8になりました。
しかし、CSS transformを指定した時にちらつく問題が新しく出てきているので解消法を書いてみます。

Safari 8でもCSS Transformがちらつくのです

Safariもバージョン8になりました。CSSのサポートも改善されています。

ところが、CSS Transformを利用すると、兄弟要素など、他の要素までちらつく問題がでてきました。
たとえば、某案件で利用した時に、リストを利用したマークアップをしているときに、弟要素がなぜかちらつく、とかの現象がでてきます。

対応方法は以前とは違う

そんなときの対応法です。以前のときとは対応方法が全く違います。
「-webkit-backface-visibility」とか使っても無意味です。
解決方法はこれ1つだけです。

これ書けばチラツキがなくせます。以前のコードを利用すると、逆に他のトラブルの問題が出てきます。

おまけ:「-webkit-backface-visibility」のバグ

「-webkit-backface-visibility」と「display:table-cell」は同時に設定してはいけません。なぜかborder-bottomが消えてしまいます。

まとめ

当然ながら、「-webkit-transform:perspective(0);」を指定することで弊害も存在するので使用するときには検証が必要です。今回問題になった案件では、「-webkit-transform:perspective(0);」を指定していたことで、Safari 8で逆に表示がおかしくなったものもありました。

しかし、毎回バージョン上がるたびにネタにすることになるんですか?これ。

このページを共有

関連記事

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

  1. Windows 8.1がリリース!高解像度OSが支配する世界がやってきた!
    Windows 8.1がリリース!高解像度OSが支配する世界がやってきた!
  2. SketchでUIデザイナーとエンジニアがコラボレーションするZeplinを使ってみた
    SketchでUIデザイナーとエンジニアがコラボレーションするZeplinを使ってみた
  3. iPhone X向けに対応するポイントをまとめてみたよ
    iPhone X向けに対応するポイントをまとめてみたよ
ページの上部に戻る