slickのフェードがIEでちらつくバグの対処方法
2020.05.20 Posted by Coding_team
こんにちは、ウェブラボクリエイターズメモです。
先日、表題の件について解消することができたのでメモします。
実際にIE(Internet Explorer11)でのバグを再現したのでまずはDEMOをどうぞ。(2020年5月時点)
DEMO
IEで見てみると、上のスライダーが切り替わる瞬間にちらついていませんか？
必ずしも発生するとは限りませんが、このバグはslickスライダーの高さを指定してはみ出た部分をoverflow:hiddenで隠し、かつfadeモードにした際に発生することがあります。
失敗例
バグが発生するのは以下のような入れ子の時です。画像を背景で指定していても同様です。
HTML
|
1 2 3 4 5 |
<ul id="slider01"> <li><img src="_img/slider01.jpg"></li> <li><img src="_img/slider02.jpg"></li> <li><img src="_img/slider03.jpg"></li> </ul> |
CSS
|
1 2 3 4 5 |
#slider01{ height: 300px; margin: 0 auto; overflow: hidden; } |
ulの部分にheightとoverflowを指定しています。
お悩みの方、このような指定になってないでしょうか？
解消例
以下のような入れ子にし、CSSの指定を変えることで解消できました。画像を背景で指定する場合はspanタグに指定してください。
HTML
|
1 2 3 4 5 |
<ul id="slider02"> <li><span><img src="_img/slider01.jpg"></span></li> <li><span><img src="_img/slider02.jpg"></span></li> <li><span><img src="_img/slider03.jpg"></span></li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 |
#slider02{ margin: 0 auto; } #slider02 li{ height: 300px; overflow: hidden; } |
liの部分にheightとoverflowを指定しています。
いかがでしたか？
バグなのであくまで解消例ですが、もし改修可能であれば改善の余地ありだと思います。ぜひお試しください。
以上、クリエイターズメモでした。
関連記事こちらの記事も合わせてどうぞ。
