Как предотвратить перекрытие полос прокрутки firefox всем контентом

Question

Я испытываю странное поведение с полосами прокрутки, которые, кажется, задают от c до Firefox.

Проблема в том, что Firefox будет отображать полосы прокрутки элементов с overflow: auto или overflow: scroll поверх любого другого элемента, который должен быть выше в иерархии z-index. Вот изображение, чтобы проиллюстрировать, что я имею в виду. Вы можете проверить это самостоятельно на этом сайте: https://www.w3schools.com/cssref/pr_pos_overflow.asp

Как видите, полоса прокрутки элемента в фон перекрывает мобильное меню на переднем плане. Как вы можете себе представить, это приводит ко всем видам ошибок отображения, когда пользователи могут видеть полосы прокрутки без элемента, к которому они фактически принадлежат.

Есть ли способ избежать такого поведения и заставить Firefox вести себя как Chrome или Safari?

Я использую Firefox 68.0.1.

Answer 1

Если у вас возникла проблема с браузером 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).

Go по этой ссылке https://caniuse.com/#search = z-index

Answer 2

Если вы добавите 'transform: translate3d (0, 0, 0)' к переполняющему элементу, он должен быть исправлен.

Например, если вы добавите выше css к 'w3-отзывчивому '-класс здесь: https://www.w3schools.com/cssref/pr_pos_overflow.asp это больше не произойдет.

Chrome имел ту же проблему.

Источник: Странное поведение z-index с полосами прокрутки под Chrome