Scroll issue with Firefox on macOS

General
1

Here’s something I’ve discovered and am totally perplexed why this happens.
On a new website I just created, when I add:

Screen Shot 2021-04-09 at 7.56.16 PM
to the site’s stylesheet, I cannot scroll the on background image in Firefox (the other browsers all work fine).

However, when I remove the “overflow-x: hidden and overflow:scroll” from the html, body rule, I can scroll on the background images in Firefox.

Screen Shot 2021-04-09 at 7.56.50 PM

Visit my site to see what I mean - currently the CSS stle has the overflow attributes removed).

But without the “overflow-x: hidden” pseudo added to the rule, the webpages will jump horizontally with mouse movements.

Any ideas how to get the best of both worlds?

2

Hi Randy,
It seems that this problem occurs in FF as long as you have the overflow-x property on both the HTML- and the body-element in your style sheet.
I am assuming your “overflow: scrolling”. is a typo and you meant “overflow-y: scroll;”? Otherwise your “overflow-x” setting would be overwritten. But I think you don’t even need the overflow-y.

1 Like
3

Welcome to this forum and thanks for your response, @Erres.

The “overflow: scroll” was indeed a typo and has been removed from my site’s style sheet. I’ve re-added the “overflow-x: hidden” to resolve the horizontal jittering. Do you know if some form of a “-webkit” equivalent that would make my page behave properly in Mozilla’s FireFox? None of the other browsers have this issue so its definitely a Mozilla issue. Do you know if they intend to fix this?

4

I’ve been trying to report this issue to Mozilla for nearly three years now and have never gotten a response. Sooo I’ve made Chrome my default browser since it seemingly works well with most of the new CSS rules. Anyone have any issues using Chrome rather than FIreFox - especially for testing out PineGrow-created websites?

5
6

You do not need anything like a ‘-webkit’-thing.
I tried this on your website and it works:

  1. remove the inner style ‘overflow-x:hidden;’ from the body element in your HTML file.
  2. leave this in style.css:
    html, body { height: 100%;}
  3. add to style.css:
    body { overflow-x: hidden;}
    Done.
    Hope this helps.
1 Like
7

A 1000 thank-you’s @Erres
This did the trick perfectly!!