translateY/X powoduje paski przewijania w przeglądarce Firefox

Question

Podczas korzystania z translateX lub translateY wydaje się, że wpływ na układ strony w przeglądarce Firefox. Trwałe paski przewijania są generowane, mimo że specyfikacja CSS stwierdza, że ​​te właściwości nie powinny wpływać na układ.

Na przykład przejdź do http://daneden.me/animate i kliknij animację "fadeOutRightBig". paski przewijania będą generowane we wszystkich przeglądarkach (obsługujących animacje CSS), ale pozostaną w Firefoksie. Czy to błąd Mozilli, czy innych przeglądarek? Jakieś znane rozwiązanie?

Answer 1

Wygląda mi na błąd: https://bugzilla.mozilla.org/show_bug.cgi?id=456497, ale to dziwne, że nie zwrócił na siebie uwagi, wydaje mi się dość poważny.

rozwiązanie, jeśli można uciec z nim, byłoby ukrywanie poziomego przepełnienie na elemencie html:

html { 
    overflow-x: hidden; 
} 

Albo jeśli trzeba przewijania w poziomie, stosuje się go na elemencie nadrzędnym.

Answer 2

Innym sposobem rozwiązania tego problemu jest, aby przełączyć się do ustalonego położenia:

#EvilElement { 
    position: fixed; 
} 

Oczywiście może to mieć inne skutki uboczne, ale nie będzie wyłączyć poziome paski przewijania na całej stronie.

Answer 3

Komentarz na temat Bugzilla issue jest słuszny: jest to to samo zachowanie, co position: relative. Miejsce pierwotnego elementu zostaje zachowane, ale jeśli transformowany element zostanie przeniesiony poza jego widoczny kontener (rzutnię lub przewijany element), dodawane są paski przewijania.

Jest to zgodne ze specyfikacją i najprawdopodobniej będzie "nie naprawi".