search

metafizzy / flickity-bg-lazyload

Flickity lazyload background images
31 stars 4 forks source link

Will bgLazyLoad reposition cells when their background images are loaded like imagesLoaded? #12

Closed kmmccafferty96 closed 3 years ago

kmmccafferty96 commented 3 years ago

This comment makes it seem like it should, but it still seems like I'm still having issues with the height of the flickity-viewport when using bgLazyLoad:

Screen Shot 2021-06-22 at 10 46 26 PM

This is random and seems to mostly happen in Safari (even more often when caching is disabled).

kmmccafferty96 commented 3 years ago

I seemed to solve the height issue by using setGallerySize: false and manually setting my height, but seems like I'm still getting a weird issue with the width of each of my cells (all set to 100% with the carousel also set to 100%):

Screen Shot 2021-06-22 at 11 42 00 PM

Again, this is random and seems to mostly happen in Safari with caching disabled, which makes me believe this is an issue with the image not being loaded and flickity failing to determine the size of the image on load.

I actually even tried to not lazy load the background images (just use background-image:url(...)) and the issue is still there.

kmmccafferty96 commented 3 years ago

Update 2: I actually dumbed it down and took out the images completely, and it's still randomly happening so I'm not sure what's happening. In the image below, my carousel cells have the red border and my inner divs have the blue border:

Screen Shot 2021-06-23 at 12 13 20 AM

And here's what it looks like when it's working (which is always in Chrome, sometimes in Safari):

Screen Shot 2021-06-23 at 12 16 06 AM
kmmccafferty96 commented 3 years ago

I realized I had a mismatch between my CSS vs. JS (2.0.0 vs 2.2.2). Upgrading my CSS fixed the issue. Sorry about that!