東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

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

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

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

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

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278