なんだろうねこれ。
症状
slick.jsを使った。一見動作に問題はない。
レスポンシブ運用なのでブラウザ幅をいじってたら、一定のところまで狭めた辺りで幅が縮小されず、ブラウザ幅が100vwを超えた。そこからさらに狭めると直ったんで、一定の幅においてのみ発生する。検証を確認するに、slick.jsで指定するラッピング要素は問題なく、生成される.slick-listにmax-width、widthとかで短い幅を指定すると収まる。.slick-track以下を削除しても整うので、このあたりが問題っぽい。
対処
こう。
.slick-list{
width: 100% !important;
height: 100% !important;
position: relative !important;
}
.slick-list .slick-track{
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
!importantを付けなくても、ラッピング要素ごと指定しても上書きできるんでどっちでもいい。まあ、基本的に普通に動作するわけで、全てのslick.jsを対象にするのは違うと思う。
これはラッピング要素に実数を指定してる場合なのでheight:100%;が使えた。高さがなければ領域が確保できないので汎用性的にはいまいち。
普段起きない症状なので、放り込んだ先の組み方と食い合わせが悪いんだと思う。だから本当はそっちを調整すべきだと思うんだけど、でも別に何も思い当たる節がないのですげーめんどくさい。なので、あんまり良くないけど、slick.js側をあわせたという形。
コメント