如何防止Firefox滚动条重叠所有内容

Question

我遇到了滚动条的奇怪行为，这似乎是 Firefox 特有的。

问题在于 Firefox 将在 z-index 层次结构中应该更高的所有其他元素之上呈现带有 overflow: auto 或 overflow: scroll 的元素的滚动条。这是一张图片来说明我的意思。您可以在本站自行测试：https://www.w3schools.com/cssref/pr_pos_overflow.asp

如您所见，后台元素的滚动条与前台的移动菜单重叠。正如你可以想象的那样，这会导致各种显示错误，用户可以看到滚动条而没有他们实际所属的元素。

有什么办法可以避免这种行为并使 Firefox 的行为类似于 Chrome 或 Safari？

我使用的是 Firefox 68.0.1。

Answer 1

如果你给溢出的元素加上'transform: translate3d(0, 0, 0)'，它应该是固定的。

例如，如果您在此处将上述 css 添加到“w3-responsive”类：https://www.w3schools.com/cssref/pr_pos_overflow.asp，它将不再发生。

Chrome 也有同样的问题。

来源： Strange z-index behavior with scrollbars under Chrome

Answer 2

如果您在使用 Firefox 浏览器时遇到问题，可以尝试：-ms-transform: translate3d(0, 0, 0)。 对于其他浏览器的兼容性：transform: translate3d(0, 0, 0)，Chrome & Safari -webkit-transform: translate3d(0, 0, 0)，对于 Opera：-o-transform: translate3d(0, 0, 0)。

通过此链接https://caniuse.com/#search=z-index