dịchY/X gây ra thanh cuộn trong Firefox

Question

Khi sử dụng translateX hoặc translateY, cách bố trí của trang trên Firefox có vẻ bị ảnh hưởng. Thanh cuộn liên tục được tạo, mặc dù đặc tả CSS nêu rõ rằng các thuộc tính này không ảnh hưởng đến bố cục.

Ví dụ: truy cập http://daneden.me/animate và nhấp vào hoạt ảnh 'fadeOutRightBig'. thanh cuộn sẽ được tạo trên tất cả các trình duyệt (hỗ trợ hoạt ảnh CSS) nhưng sẽ vẫn tồn tại trong Firefox. Đây có phải là do lỗi của Mozilla hoặc bởi các trình duyệt khác không? Bất kỳ giải pháp được biết đến?

Answer 1

Trông giống như một lỗi đối với tôi: https://bugzilla.mozilla.org/show_bug.cgi?id=456497 nhưng thật kỳ lạ nó không nhận được sự chú ý, có vẻ khá nghiêm trọng đối với tôi.

Các giải pháp, nếu bạn có thể nhận được ngay với nó, sẽ là ẩn tràn ngang trên các yếu tố html:

html { 
    overflow-x: hidden; 
} 

Hoặc nếu bạn cần cuộn ngang, áp dụng nó vào các yếu tố phụ huynh.

Answer 2

Một cách khác để giải quyết vấn đề này là chuyển đổi sang vị trí cố định:

#EvilElement { 
    position: fixed; 
} 

Tất nhiên điều này có thể có tác dụng phụ khác, nhưng nó sẽ không vô hiệu hóa thanh cuộn ngang cho toàn bộ trang.

Answer 3

Nhận xét về số Bugzilla issue làm cho một điểm tốt: đây là hành vi tương tự như position: relative. Vị trí của phần tử gốc được giữ lại, nhưng nếu phần tử được chuyển đổi di chuyển ra ngoài vùng chứa có thể xem của nó (khung nhìn hoặc phần tử cuộn được), thanh cuộn sẽ được thêm vào.

Điều này phù hợp với thông số kỹ thuật và rất có thể sẽ "không khắc phục được".