slickがモーダルやタブなどに入れたら不具合出る件
ラノベみたいなタイトルになった
モーダルやタブで表示される要素の中にslickを入れると１つ目のスライドが表示されなかったりする。 原因は親要素にdisplay: none; がかかっていると、要素のwidthが取得できなくてwidth: 0;になってしまうことらしい。
visibility: hidden;でなんとかなるならそれが早いが、 modaalを使っている際にうまくいかず、 この件で検索するとめちゃくちゃ出てくる slider.slick('setPosition'); で一応は解決する。 モーダルの要素を表示したタイミングで効いてほしいので、click functionを設定。 参考 https://note.com/asamin_moto/n/n8f5eec75406f これでスライダーはちゃんと１つ目から表示されるようになったが、 モーダルのウィンドウが画面からはみ出る。 slickを入れる前ははみ出ないのでslickが悪さしてる。 というか、slickが取得するstyleのwidthがおかしい。
要素のwidth変えても解決しないのでウワーーーー！？と思っていたら これ https://teratail.com/questions/43316
slickを実装した階層より上の階層の要素（親要素など）で display:tableや、flexなどを使っている場合、 widthがうまく取得できない時があります。
理由は、たしかCSSによってページの描画の順番が変わるためだった気がします。 １．子要素のwidthは、親要素のwidthから算出したサイズ ２．子要素のwidthを全て足した数が、親要素のwidth という違いが切り替わるため正しい幅を取得できない場合があります。
２の場合は子要素にwidthなどが設定されている場合でslickが動いてくれるパターンです。
１は親要素の幅にpxやremなどの実数が設定されていないとうまく動きません。 ％などの相対値では動きません。
回避する方法としてdisplay:table付の親要素が存在する際は その要素にtable-layout:fixedを設定し その子要素には必ずdisplay:table-cellを設定、 さらに全ての要素にbox-sizing:border-boxを設定するのがおすすめです
解決。
先達はあらまほしきことなり。
