何かと便利なslick.js。
スライドINしてくる画像がうまく表示されない
iOS(Androidでもそうかも?)で、センターモードにしている場合。
画面外にあった画像がブラウザ描画領域内にINしてくるとき、画像の領域全部が入るまで描画されないことになってました。いままでそんなことなかった気がする。
「lazyLoad: ‘progressive’」かな?と思い「ondemand」にしても変わらず、、、
slick.jsのオプションではどうにもならないっぽい。
もうじき公開予定のサイトで発生したので、ゆっくり調べている時間なし。困った。
slick内のimgタグの問題なら、ラッパーの背景にしてやれば良いんでないか?
と思いついて試したところビンゴ。iOSでも正常に表示されました。
- HTMLやCSSによっては背景処理できないことがあるかも
- ラッパーにいちいち高さ指定もしてやる必要がある
ので良い回避策ではないと思うけれど、とりあえず!な場合に。