question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Slick pushing content down page in Firefox

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Comments:19 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
ghostcommented, May 8, 2017

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.

0reactions
MRDesingcommented, Apr 12, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Slick Carousel arrows break on Firefox and Safari (.slick-prev ...
In Firefox: hover state ceases to work (arrows are supposed to become more opaque on hover). The navigation only applies to the original...
Read more >
Web Push notifications in Firefox - Mozilla Support
Web Push allows websites to notify users of new messages or updated content while Firefox is open.
Read more >
My updated userchrome config: Slick-Fox : r/FirefoxCSS - Reddit
Pushing the limits of the Firefox Browser through the use of CSS. ... sliding part (address bar, etc) not moving the content of...
Read more >
accessible-slick - the last (accessible) carousel you'll ever need
accessible-slick is a highly accessible version of the popular Slick Slider responsive carousel jQuery plugin that supports multiple breakpoints, ...
Read more >
Preventing Content Reflow From Lazy-Loaded Images
JavaScript watches the user scroll down the page · When the use encounters an image, JavaScript moves the data-src value into src where...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found