お疲れ様です。小林です。
「Safari + transition + opacity」
今回はこちらの組み合わせに限定してのお話になってしまいますが…。transitionが設定されている要素に対して、例えば、jQuery.css()でopacityを操作すると、Safariでチラつくんです。Safariでだけです。
サンプル
以下がサンプルです。
※環境をお持ちの方はSafariで閲覧してみてください。iPadでもいいですね。
Safariでみると、フェードの処理がスムーズにいかずにチカチカしてしまうんですね。しかも結構ランダムに。
原因
いろいろ調べてみたのですが、どうやら、opacityの値の操作とtransitionが何やら干渉してしまっている様子。
Safari + transition + opacity で検索すると、同じような問題で悩んでいる方が多々おられる様ですが、対応策は状況によりけりで、現在、有効な手だてはあまり無さそうです。
対策
ただ、解決策が無いという訳ではなく、例えばすべてtransitionで対応する、もしくは、jQueryで対応する、といった具合で混在させなければ問題なさそうです。
以下はすべてtransitionで対応したサンプルです。
まとめ
アニメーションさせる手段がたくさん提供されてきたのはいいのですが、組み合わせ次第では、こういった現象に遭遇してしまう訳ですね。実装前に、しっかりと考えて、どういう手段で実現するか、マークアップの段階から考えて進めていかないと、これからは難しくなっていきそうですね。
ちなみに私のメインブラウザはSafariなんですが、最近肩身が狭いです。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
