translateY / X вызывает полосы прокрутки в Firefox

Question

При использовании translateX или translateY макет страницы в Firefox, похоже, изменяется.Постоянные полосы прокрутки создаются, даже если в спецификации CSS указано, что эти свойства не должны влиять на макет.

Например, перейдите к http://daneden.me/animate и щелкните анимацию 'fadeOutRightBig'.полосы прокрутки будут сгенерированы во всех браузерах (которые поддерживают CSS-анимацию), но сохранятся в Firefox.Это из-за ошибки Mozilla или других браузеров?Любое известное решение?

Answer 1

Другим способом решения этой проблемы является переключение на фиксированное позиционирование:

#EvilElement {
    position: fixed;
}

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

Answer 2

Для меня это похоже на ошибку: https://bugzilla.mozilla.org/show_bug.cgi?id=456497 но странно, что на нее не обратили внимания, мне это кажется довольно серьезным.

Решением, если вам это сойдет с рук, будет скрыть горизонтальное переполнение элемента html:

html {
  overflow-x: hidden;
}

Или, если вам нужна горизонтальная прокрутка, примените ее к родительскому элементу.

Answer 3

Комментарий к проблеме Bugzilla дает хорошее замечание: это то же поведение, что и position: relative.Место исходного элемента сохраняется, но если преобразованный элемент перемещается за пределы своего видимого контейнера (область просмотра или прокручиваемый элемент), добавляются полосы прокрутки.

Это соответствует спецификации и, скорее всего, будет "не будет"исправить».