Mac SafariでWebページの要素に対してCSSプロパティ `opacity: 0;` から `opacity: 1;` にトランジションを適用すると、一部の環境で画面がチラつくという問題が報告されています。
この問題は、ブラウザが要素の透明度を0から1に変化させる際にレンダリングの問題が発生し、画面のチラつきが生じることが原因とされています。
対策
問題を解決する一つの方法として、透明度の値を0ではなく、非常に小さい値（例えば0.01）から1に変化させる方法があります。つまり、`opacity: 0;` を `opacity: 0.01;` に変更します。
この修正により、ブラウザは要素の透明度を完全に0にするのではなく、ほとんど透明な状態からトランジションを開始します。これにより、上記のレンダリング問題と画面のチラつきを回避できます。
以下に、修正後のCSSの例を示します。
.element {
opacity: 0.01;
transition: opacity 1s ease-in-out;
}
.element:hover {
opacity: 1;
}
このコードは、`.element` の透明度をほとんど透明（0.01）から完全に不透明（1）に変化させます。`transition` プロパティは、透明度が変化する速度とパターン（ここでは1秒間で、イージング関数 `ease-in-out` を使用）を制御します。
以上が、Mac SafariでのOpacityのチラつき問題とその対策についての説明です.