Safariでopacityの操作をすると描画がチラつくのはなぜ？原因と対策 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

お疲れ様です。小林です。 「Safari + transition + opacity」 今回はこちらの組み合わせに限定してのお話になってしまいますが…。transitionが設定されている要素に対して、例えば、jQuery.css()でopacityを操作すると、Safariでチラつくんです。Safariでだけです。 サンプル 以下がサンプルです。 ※環境をお持ちの方はSafariで閲覧してみてください。iPadでもいいですね。 jQueryでopacityを操作 Safariでみると、フェードの処理がスムーズにいかずにチカチカしてしまうんですね。しかも結構ランダムに。 いろいろ調べてみたのですが、どうやら、opacityの値の操作とtransitionが何やら干渉してしまっている様子。 Safari + transition + opacity で検索すると、同じような問題で悩んでいる

[rui17sei]

目星を付けて、 position:relative を関係のありそうな箇所に付けまくる。そうすると直る。何故かわからないが。

[minonet]

Safariでopacityの操作をすると描画がチラつくのはなぜ？原因と対策 お疲れ様です。小林です。 「Safari + transition + opacity」 今回はこちらの組み合 [...] The post S...