軽量で多機能・アクセシビリティも配慮したスライダーが作成できる「splide」ですが、
safariのブラウザで確認した時にスライドの高さが正しく認識されずに、謎の余白が下に発生するという問題が起きました。
▼splideについてはこちら
原因はスライド画像に設定していたLazy Load（遅延ロード）
Lazy Loadとは遅延ロードを行う設定です。
遅延ロードとはWEBページを表示する時、ページのすべてを読み込みするのではなく
ユーザーの画面にまず表示されている範囲のみの画像等を読み込みする仕組みの事です。
この遅延ロードを行うLazy Loadをスライドの画像に設定していたことが原因で
safariで見た時にスライドの下に謎の余白が発生していたようです。
おそらく遅延ロードに影響を受けて画像の高さが判別できずに謎の余白が発生したのでしょうか。
まとめ
今回の問題はsafariでのみ発生し、他のブラウザ（Chrome 等）では発生しませんでした。
問題が発生して困っている方の参考になれば幸いです。
JOURNALが気に入ったら「いいね」してね！
