0

This is a very weird and specific bug that only happens on Firefox, and I'm having trouble narrowing it down.

I have a page with a sticky menu followed by a fluid container. In order to remove all padding from the container while keeping everything else untouched (like column gutters), I had to add this CSS to it:

#main-container {
    padding: 0;
    overflow-x: hidden;
}

This is the only simple way I found to do that, and it works. If you remove the overflow property, some horizontal scrolling appears. See https://stackoverflow.com/a/35192643/5845942

But when I pin the menu, scroll until its position becomes fixed, and interact with certain items on the page, vertical space appears on the page, between the menu and the container. This happens when triggering CSS transitions and other JS DOM manipulations.

Here is a jsfiddle: https://jsfiddle.net/vctls/mac2Ls0d/35/

A screenshot: screenshot

And a video: https://i.stack.imgur.com/P5RLo.jpg

Again, this only happens on Firefox. Chrome handles the layout without any issue. It doesn't happen either if the menu isn't pinned, or if you remove the overflow property from the container.

This seems to be a Firefox bug. I found a similar issue was already reported: https://bugzilla.mozilla.org/show_bug.cgi?id=1618029

I'm trying to find a workaround.

vctls
  • 736
  • 7
  • 25
  • i do not see much difference with chrome and ff with a padding reset `
    ` https://jsfiddle.net/qj82a53v/
     – G-Cyrillus Jan 13 '21 at 12:20
  • Because you don't have the full content of my page. Using `p-0` creates other issues with colums. I've tried most other answers to the question I linked, and only this solution worked all the time, until this. – vctls Jan 13 '21 at 12:39
  • okay, your fiddle doesn't reproduce your screenshot issue with my Firefox. (latest, 64 bits w10) – G-Cyrillus Jan 13 '21 at 12:42
  • Are you sure? I tried multiple versions of Firefox, on two computers and even an Android phone, and I have the same issue. Did you use the latest fiddle? I think I'll record a video, it will be easier to understand. – vctls Jan 13 '21 at 12:54
  • I added a video. I also added columns to the fiddle, so you can see that removing the overflow property creates horizontal scrolling. I linked a Firefox bug report that seems to be about the same issue. – vctls Jan 13 '21 at 13:59
  • Maybe i do not totally understand your issue, width:100% seems too easy to solve your trouble ? `
    ` https://jsfiddle.net/mojt4g3b/
     – G-Cyrillus Jan 13 '21 at 15:38
  • You put the padding back in. I want this padding to go away. https://i.imgur.com/NBNS1pn.png And as soon as you add `padding: 0` it overflows. – vctls Jan 13 '21 at 16:39

0 Answers0