How to prevent firefox scrollbars from overlapping all content

Question

I'm experiencing a weird behavior with scrollbars which seems to be specific to Firefox.

The issue is that Firefox will render the scrollbars of elements with overflow: auto or overflow: scroll on top of every other element that should be higher in the z-index hierarchy. Here's an image to illustrate what I mean. You can test it yourself on this site: https://www.w3schools.com/cssref/pr_pos_overflow.asp

As you can see, the scrollbar of the element in the background is overlapping the mobile menu in the foreground. As you can imagine, this leads to all sorts of display bugs where users can see scrollbars without the element that they actually belong to.

Is there any way to avoid this behavior and make Firefox behave like Chrome or Safari?

I'm using Firefox 68.0.1.

Answer 1

If you add 'transform: translate3d(0, 0, 0)' to the overflowing element, it should be fixed.

For example if you add the above css to the 'w3-responsive'-class here: https://www.w3schools.com/cssref/pr_pos_overflow.asp it won't happen anymore.

Chrome had the same issue.

Source: Strange z-index behavior with scrollbars under Chrome