【スマホのみ】最初cssでopacityを0にしている要素については、loading="lazy"をつけると表示されなくなる？

自分のIphoneでは大丈夫だったが、他の人のIphoneでは問題があったという、謎現象のメモ。

現象

cssで透明度を0にして、後からクラスを付けて透明度を1にするという画像（img要素）があった。

それがスマホでは見えないと。

原因

jsでopacityをimgに0にしている箇所は、問題がなかった。

おそらく、cssでopacity:0にしている画像は、内部的に不要と判断されて二度と読み込まれなくなるのかもしれない。

自分のIphoneは大丈夫だったが、最新の機種ではそういうことになるのかも。

対策

• そもそもimgなどのインライン要素にアニメーションを付けない。不安定。divで囲む。
• jsでopacity:0 を設定する。
• loading="lazy"を外す