6

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

scrollbar issue

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.

kschiffer
  • 132
  • 1
  • 9

2 Answers2

4

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

Tvm
  • 56
  • 4
  • When I add this to the overflowing element some empty weird spaces appear. What could cause this? At the end of the scroll empty scrolling area appeared – Arp Nov 11 '22 at 19:43
0

If you facing the issue with the Firefox browser you may try: -ms-transform: translate3d(0, 0, 0). And for other browsers compatibility:transform: translate3d(0, 0, 0), Chrome & Safari -webkit-transform: translate3d(0, 0, 0) , for Opera: -o-transform: translate3d(0, 0, 0).

Go through this link https://caniuse.com/#search=z-index

Siddharth panchal
  • 81
  • 2
  • 13