search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.52k stars 605 forks source link

Gap appears using imagesLoaded:true #1209

Closed dijkermans closed 1 year ago

dijkermans commented 2 years ago

Hi, there's a gap with imagesLoaded: true with 3 cells on first time load. It's fixed after resize.

flickity

Test: https://codepen.io/dijkermans/pen/YzEgarb

It's fixed with imagesLoaded:false, but then there's unfortunately still the height problem mentioned here: #906

This vanilla resize doesn't work either to fix the height problem:

window.addEventListener('DOMContentLoaded', (event) => { flkty.resize(); });

Also, this adaptiveHeight fix #185 isn't a proper solution to fix the height problem, because it causes content shift. It looks like the wrong height is corrected aftwarwards. The initial calculated height seems to be the width of the image of 1 cell. So it only works fine with square images.

Thanks.

desandro commented 1 year ago

Thanks for reporting this issue. Hmm, sounds like a tricky one. I wasn't able to reproduce the issue with the CodePen either. This issue is a bit old so I'm closing for now.