Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
kmmccafferty96 opened this issue Jun 23, 2021 · 3 comments

Comments

@kmmccafferty96
Copy link

kmmccafferty96 commented Jun 23, 2021

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
Copy link
Author

kmmccafferty96 commented Jun 23, 2021

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
Copy link
Author

kmmccafferty96 commented Jun 23, 2021

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
Copy link
Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant