クリエイターブログ

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

2020.05.20 Posted by

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を指定しています。

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

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

CONTACT

お電話でのお問い合わせ

03-5366-3277

受付時間:平日9:30〜18:30

メールフォームからのお問い合わせ

お問い合わせ(東京本社)

PAGETOP

Document資料請求

Contactお問い合わせ