2021/05/28
slick(スライダー)の要素内で浮かせたラベル等のチラつき解消方法
kazuki
2021/05/28
こんにちはkazukiです。
スライダー(主にslick)を使用して要素内のラベルなどをposition: absolute;した際、チラつくことがあったので、その解決方法をメモしておきます。
コード
cssはこのようにします。
.label {
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
このようにposition: absolute;させている要素に追加します。
解説
slickに使用されているCSS Transformsとの相性の問題で、スライダー内で浮かせている要素が、切り替わる時に一瞬消えてまた表示されると言う現象が起きるようです。
なので、浮かせている要素自体にcssを当てることである程度は解決できるかと思います。
ですが、注意としていては確実な方法とまではいかないです。。。
なので作成する際は、クライアントから指定される、最低限表示保証のブラウザは確認する必要があります。