slickのフェードがIEでちらつくバグの対処方法

3149537_s
こんにちは、ウェブラボクリエイターズメモです。
先日、表題の件について解消することができたのでメモします。
実際にIE(Internet Explorer11)でのバグを再現したのでまずはDEMOをどうぞ。(2020年5月時点)

DEMO

IEで見てみると、上のスライダーが切り替わる瞬間にちらついていませんか?
必ずしも発生するとは限りませんが、このバグはslickスライダーの高さを指定してはみ出た部分をoverflow:hiddenで隠し、かつfadeモードにした際に発生することがあります。

失敗例

バグが発生するのは以下のような入れ子の時です。画像を背景で指定していても同様です。

HTML

CSS

ulの部分にheightとoverflowを指定しています。
お悩みの方、このような指定になってないでしょうか?

解消例

以下のような入れ子にし、CSSの指定を変えることで解消できました。画像を背景で指定する場合はspanタグに指定してください。

HTML

CSS

liの部分にheightとoverflowを指定しています。

いかがでしたか?
バグなのであくまで解消例ですが、もし改修可能であれば改善の余地ありだと思います。ぜひお試しください。
以上、クリエイターズメモでした。

  • このページを共有する