Slick pushing content down page in Firefox

[maxdeviant]

Today 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.

[kenwheeler]

Can you create a demo? I've seen something like that happen before, sounds like a browser bug, but something I'd still like to mitigate.

[maxdeviant]

Yea, I will see if I can reproduce in a demo environment.

I have only noticed it in Firefox, and the behavior seemed to vary based on the size of the window.

[kevinwhoffman]

@maxdeviant Inspect the slider and see if .slick-track width is causing the issue. When I have seen this happen before, it was because .slick-track was not being set wide enough to accommodate all images, which pushed content down the page.

Also read through https://github.com/kenwheeler/slick/issues/790 and see if that sounds like the same issue.

[maxdeviant]

@kenwheeler I tried making a demo, but I could not reproduce the issue easily. Seems to be tied to exact environment of a particular project.

@kevinwhoffman I will have to look into this, but the issue you linked sounds slightly different.

[kenwheeler]

@maxdeviant let me know

[davidpollet]

Hi, I have same problem with the same browser. You could see a demo here : http://davidpollet.power-heberg.com/labs/slick/

PS: Thanks for your awesome free slider. :)

[maxdeviant]

@davidpollet Your demo seems to be working for me in Firefox 34.

[davidpollet]

Firefox scroll to #navbar correctly ? I tested on firefox 34 on w8.1 and w7 with the same result. :/ I can make a screencast if you want.

[maxdeviant]

Oh, I see what you mean now.

Slightly different issue than what I was having.

In my case, there was a large section of empty space that was pushing the rest of the content down the page.

[davidpollet]

Ok. What i should do ? Create a new issue ? I'm git noob. ^^

[kenwheeler]

You can keep them here, but replicating the issue in a fiddle is really helpful for me. I can rule out external influence and see if the problem is coming from slick or not

[davidpollet]

Hi, I created two page with no extra css/js. Just slick. Same result. Firefox fail to scroll to anchor. http://davidpollet.power-heberg.com/labs/slick-pure/

I don't know how to create multiple page in JSFiddle. I created a zip for local test. http://davidpollet.power-heberg.com/labs/slick-pure/slick-pure.zip

I know how to fix the problem but i can't wrote that in JS (i'm designer with css and very little programming baggage). Max-height on slick container solve the problem. I tested with css and it work. But in responsive context, i need a variable max-height. :/

[davidpollet]

I solved my problem with progressive enhancement. :) In first, i added a class display none on all slider's children except the first. Second, i used jQuery removeClass for cancel the display none rule.

User with no JS don't see a broken layout and firefox catch anchor correctly.

[fourroses666]

This issue is still there. (FF OSX and WIN) Is there an easy way to fix it? When refreshing the page the current scrolled position is way off.

[lvmajor]

Similar problem happens to me on multiple browsers (chrome, firefox and edge all to their latest versions). When I load a page in which there is a slick carousel activated, the anchor position is always way off and always at the same place for all sections below the carousel.

@kenwheeler, would it be possible to reopen and investigate?

I will try to dig further down the issue to help fixing it but I'm a rookie so I can't promise anything :)

[ghost]

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.

[a4aLien]

Still having the problem on a horizontal carousel. It skips the first

I have 5 370px and the container for them, div.slick-track is 1850px wide, which is correct. I only have to disable/enable the CSS rule on slick.css line-99: .slick-initialized .slick-slide { display: block; }

Disabling/Enabling via inspect-element fixes the first slide without refresh.

Will update when I find a fix.

Firefox vers. 53.0.3 (32-bit)

UPDATE: This fixed it for me on FF:

$(" .slick-slide").css({ "display": "none" });

function Timer() {

    $(".slick-slide").css({ "display": "block" });

        clearInterval(First);

    }

var First = setInterval(function(){ Timer() }, 500);

[vaibhavshah846]

For any one still struggling with this in 2019, we faced a similar issue with chrome stable release v76. The root cause of our issue was not the slick slider but the way its container was positioned. The container of the slick slider was positioned "absolutely" with only its "right" attribute specified. The CSS:

.slick-container
{
 position: absolute,
 right: 0
}

This does not go well with the new version of Chrome and we need to specify at least two co-ordinates for an absolutely positioned element. So adding a "top" attribute resolved it.

.slick-container
{
 position: absolute,
 right: 0,
 top: 0
}

Alternatively, position it relatively.

.slick-container
{
 position: relative,
}

[MRDesing]

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