WordPressで横スクロールアニメーションをしたいと思っています。
https://rita-plus.com/blog/css-animation-scroll-infinity/
こちらのサイトを参考に左端から無限ループを作成しました。
PCでは問題なく動作しています。
iPhoneでは1週目は正しく画像が表示されますが2周目の画像が表示されずaltに設定している文字が表示されてしまいます。
altの文字部部分を触ると画像が表示されるような状態です。
該当のソースコード
<div class="scroll-infinity"> <div class="scroll-infinity__wrap"> <ul class="scroll-infinity__list scroll-infinity__list--right"> <li class="scroll-infinity__item"><a rel="nofollow noopener noreferrer" target="_blank" href="URL"><img src="sample.png" /></a></li> <li class="scroll-infinity__item"><a rel="nofollow noopener noreferrer" target="_blank" href="URL"><img src="sample.png" /></a></li> <li class="scroll-infinity__item"><a rel="nofollow noopener noreferrer" target="_blank" href="URL"><img src="sample.png" /></a></li> <li class="scroll-infinity__item"><a rel="nofollow noopener noreferrer" target="_blank" href="URL"><img src="sample.png" /></a></li> <li class="scroll-infinity__item"><a rel="nofollow noopener noreferrer" target="_blank" href="URL"><img src="sample.png" /></a></li> <li class="scroll-infinity__item"><a rel="nofollow noopener noreferrer" target="_blank" href="URL"><img src="sample.png" /></a></li> </ul> <ul class="scroll-infinity__list scroll-infinity__list--right"> <li class="scroll-infinity__item"><a rel="nofollow noopener noreferrer" target="_blank" href="URL"><img src="sample.png" /></a></li> <li class="scroll-infinity__item"><a rel="nofollow noopener noreferrer" target="_blank" href="URL"><img src="sample.png" /></a></li> <li class="scroll-infinity__item"><a rel="nofollow noopener noreferrer" target="_blank" href="URL"><img src="sample.png" /></a></li> <li class="scroll-infinity__item"><a rel="nofollow noopener noreferrer" target="_blank" href="URL"><img src="sample.png" /></a></li> <li class="scroll-infinity__item"><a rel="nofollow noopener noreferrer" target="_blank" href="URL"><img src="sample.png" /></a></li> <li class="scroll-infinity__item"><a rel="nofollow noopener noreferrer" target="_blank" href="URL"><img src="sample.png" /></a></li> </ul> </div> </div>

0 コメント