Slick pushing content down page in Firefox
See original GitHub issueToday I noticed some weird behavior in Firefox (34.0), where the content below the Slick container was being pushed way down the page.
After a little investigation, I noticed that by disabling Slick (and thus having the images in the carousel stack on top of each other down the page), the point where the content was being pushed to was where the images ended.
It seems like Firefox does not adjust the other elements when the carousel elements collapse down into the carousel, leaving them positioned further down the page.
I was able to fix this issue by adjusting the height of the Slick container after initialization:
$('.slick-container').height(1);
Not sure if this qualifies as a bug, but I thought I may report it anyways, if for no other reason than helping someone else who encounters the same issue.
Issue Analytics
- State:
- Created 9 years ago
- Comments:19 (3 by maintainers)
Top GitHub Comments
Still having the same problems like others. After using anchor tag scrolling position gets off. I have two sliders which are triggered only on mobiles, the problem occurs only with the top one. If I comment out triggering first slider it scrolls as it should. Tried @davidpollet solution but none of that worked for me. Also I tried to use timeout but it only makes the bug appear later. Any ideas? It’s been years since that issue was opened…
EDIT: Tried silliest sollution which came to my mind. Before calling first slider I use height() to check height of container and I set it with css(“height”). Now it works fine.
I have created a carousel with Slick.js in Divi and am having this same problem with Firefox.
https://prnt.sc/11aq9xx
I have tried the solutions outlined here but I can’t get it to work properly. I have tried several Divi modules to make the carousel and with the Image and Blurb modules works correctly. But with the Portfolio and Blog modules, I get this bug in Firefox