ブログ

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で逆に表示がおかしくなったものもありました。

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

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