chromeでopacityがカクツク原因と簡単な対策【ios】

2024年9月1日

よく、コンテンツやメニューを表示する際に、opacityの値を0から1へ帰ることによって、フェードイン、フェードアウトするアニメーションを作成しますよね。

ただ、なぜかスマホのchromeブラウザで確認してみると動きがカクついてしまう。
特にiphoneの端末で怒るような気がします。

chromeでopacityがカクツク理由

調べましたが、これだという答えはありませんでした。
恐らく、スマホ端末、chromeのバージョンなど様々なことが関係してそうですが、恐らくバグのようです。

chromeでopacityがカクツク理由

ということで、早速opacityがカクつくサンプルを作成しました。
URLを張っておきますが、スマホで見ないと意味がないと思いますので、QRコードを添付しておきます。

ボタンを押すと、opacity:1になり、コンテンツが表示されるというサンプルです。

https://sample.web-create-kokusyo.com/sample11/

どうでしょう？
カクつきましたか？
私はiphoneのchromeのみカクつきました。

ちなみに、該当箇所のCSSはこんな感じです。（デザインに関するスタイルは省略）
ちゃんとtransitionを指定していますが、カクついてしまいました。

.hidden-content {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out; /* Safari用 */
    transition: opacity 0.5s ease-in-out;
}
.visible {
    opacity: 1;
}

chromeでopacityがカクツク対策

前置きはこれくらいにして、このページに到達した皆さんは原因を早くしりたいと思いますので、早速こたえを。。

transition-delay: 0.01s;を指定しましょう。

transition-delay プロパティは、値が変更されたときトランジション効果が始まるまでの待ち時間を指定するプロパティのため、あまり影響がないように0.01sにしています。

.hidden-content {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out; /* Safari用 */
    transition: opacity 0.5s ease-in-out;
    transition-delay: 0.01s; /* これを追加！ */
}
.visible {
    opacity: 1;
}

ワンコ

ということで、「transition-delay: 0.01s;」を指定したものが下記のURLです。
これで修正されてると思います。

https://sample.web-create-kokusyo.com/sample11/index2.html

「transition-delay」で修正される理由

ワンコ

理由は。。。知らん！
考えるな。感じろ

ワンコ

一応AIに聞いてみた所、以下のような返答でした。
あってるかどうかは分かりませんが、時間の有る方は読んでみてください。

transition-delay: 0.01s;を指定したところ、opacityのトランジションが正常に動作するようになった理由は、主にブラウザがトランジションの処理を適切に認識するようにするための「トリガー」として機能している可能性があります。

詳細な説明

トランジションのトリガー効果:
- CSSトランジションは、要素の状態が変わったときにその変化をアニメーションで表示するために使用されますが、非常に短いtransition-delayを指定すると、ブラウザに「トランジションが開始される」というシグナルを送る役割を果たします。このシグナルによって、ブラウザがアニメーションを適切に処理し、トランジションのスムーズな動作が保証されます (GitHub)。
Safariの描画エンジンの特性:
- Safariの描画エンジン(WebKit)には、特定のタイミングやレンダリングの問題があり、要素の状態変化が適切に認識されないことがあります。transition-delayを極めて短く設定することで、ブラウザが状態の変化を検出しやすくなり、その結果、トランジションが正しく実行されます (Designcise) (CSS-Tricks)。
レースコンディションの回避:
- 非常に短いtransition-delayを指定することで、アニメーション開始前のレンダリングに必要な準備が整う時間を確保する効果があります。これにより、レンダリングの際に発生する可能性のある「レースコンディション」を回避し、トランジションが滑らかに実行されるようになります (GitHub)。

このように、transition-delay: 0.01s;を指定することで、トランジションの動作が改善されるのは、ブラウザに明確なトリガーを提供し、レンダリングプロセスを安定させるためです。この手法は、Safariのようなブラウザで特定のトランジションが正常に機能しない場合に有効です。