はじめに
CSS Advent Calendar 2023 23日目の記事です。
釣り気味のタイトルです。ごめんなさい。
もう少し詳しく書くと、transform等の高負荷になりがちなプロパティを使ったときに、スマホのような非力な環境では要素が消えたり、ブラウザが落ちることがあるよという内容です。
※主にMacを使って開発をされている方向けの情報になります。
先に解決方法
- スマホでの閲覧が想定されている場合は、実装時にちゃんと実機確認をする
- もし不具合が出ていそうであれば Xcode の Simulator の Debug > Color Blended Layers で確認しながら負荷を減らす
が、主な対処方法になると思います。
よくありがちなこと
普段、ウェブサイトやウェブアプリの実装時に、検証スピードを上げるために、PC用ブラウザの開発ツールのスマホビューを使用したり、ちょっと頑張った際にはXcode等にある検証ツールを使って、表示の確認をしていることが多いと思います。
ただ、ここには罠があります。
PC用ブラウザの開発ツールや、開発環境の検証ツールでは完璧に表示されているのに、特定環境で一部の要素が表示されない場合やブラウザが落ちるという現象が発生することがあります。
はじめてこれに出会った際には、まさに「おま環」という感じがして、手元の開発ツールや検証ツールで確認して「再現できず」と返答してしまう可能性があるのですが、一呼吸おいて実機で確認してみましょう。
Color Blended Layersを使ってみよう
怪しげな挙動を見かけたら Xcode の Simulator の Debug > Color Blended Layers を使って確認してみてください。
1枚目はColor Blended LayersがOFFの状態、2枚目はONの状態になります。ONの際には画面に緑と赤の色がついていると思います。
この赤い箇所が負荷の高いところで、赤い箇所が増えすぎると表示に不具合のでる可能性が高くなります。
どういうことをしたら赤い状態になるのか？
要素が静止している場合と、アニメーションしている場合で若干の違いはありますが、基本的には transform 等を使って下の要素との重なりがあるときに赤い状態となります。
例えば静止している状態だとtransform:translate3dだったりtransform:rotateXを使用すると赤い状態が発生しますが、transform:translateXやtransform:rotateでは緑のままです。
アニメーションしている場合ではtransform:translate3dやtransform:rotateXに加えて、transform:translateXやtransform:rotateでも赤い状態になります。
どのように赤から緑にするのか？
アニメーションでいうとtransform:translateXではなくpositionとleftの組み合わせを検討してみるという手はあります。たしかにtransform:translateXの方が動きはなめらかで、positionとleftの組み合わせは若干劣ります。環境や場合によってはカクつくということもあるかもしれません。ただし赤い状態から緑の状態にはなります。
3D関係のプロパティを使っているときは、他の代替手段があまり思いつかないということもありそうです。
滑らかさや3D関係のプロパティが必要な箇所のみを残し、位置（leftやtop）、大きさ(widthやheight)は目立たない範囲で置き換えていく、場合によっては変形する箇所やアニメーションする場所を絞る等の判断が必要になってくるかもしれません。
とはいえ……
ブラウザ側の処理が上手くなったのか赤くなるプロパティ等々が減っていたり、ハードウェアのスペックが向上しているのもあり、以前より気にしなくても大丈夫な範囲は増えていると今回の記事を書いていて感じました。
ご参考になれば🙏🏻