Hoạt ảnh jQuery và CSS Choppy trong Firefox

Question

Tôi đang làm việc trên một số minisite có nhiều hoạt ảnh jQuery. Nó hoạt động tốt trong Safari, Chrome & IE9, nhưng hoạt ảnh thực sự bị thay đổi trong Firefox (7, 8 & 9) trên OSX. Tôi nghĩ rằng hình ảnh động CSS sẽ mượt mà hơn, vì vậy tôi adapted phiên bản iPad của trang web và đã thử điều đó trong Firefox. Nó có vẻ như là xấu.

Tôi đã không dành nhiều thời gian với Firefox, vì vậy tôi không chắc mình đang làm gì sai ở đây. Tôi có cần phải kích hoạt tăng tốc GPU (như sử dụng dịchZ (0) trong Webkit) hay là nó chỉ được sử dụng mọi lúc cho mọi thứ (như IE9?) Firefox có đủ mạnh không, ngay cả với GPU?

Tôi thực sự đánh giá cao bất kỳ trợ giúp nào tôi có thể nhận được. Tôi là loại cuối của dây của tôi về điều này.

Answer 1

Sau một số lượng công bằng tìm kiếm và đặt câu hỏi, có vẻ như Firefox không xử lý hoạt ảnh DOM cũng như các trình duyệt khác. Vì vậy, có vẻ như tôi sẽ chỉ phải sống với hoạt hình Firefox choppy.

Answer 2

Tôi nhận thấy các hoạt ảnh không nói lắp trong khi firefox bị cửa sổ, Tôi đang sử dụng Win 7 x32. Họ làm việc ra thật trơn tru.

Hoạt ảnh này hơi bị thay đổi trong khi chỉ hiển thị. Phần còn lại là tốt & trang web đó là một công việc tuyệt vời đáng kinh ngạc & bạn đã làm cho đến nay!

Answer 3

Tôi biết câu hỏi này đã được hỏi nhiều năm trước nhưng tôi chỉ tình cờ gặp nó và không có câu trả lời thực sự ngoài 'firefox sucks'. Bí quyết để kích hoạt tăng tốc phần cứng cho các yếu tố hoạt hình dom trong firefox là thêm một vòng xoay nhỏ cùng với bản dịch của bạn. Ví dụ:

@keyframes square-animation { 
    0%, 100% { 
     transform: translate(600px, 160px) rotate(0.01deg); 
    } 
    50% { 
     transform: translate(355px, 160px) rotate(0.01deg); 
    } 
} 

Lý do khiến bạn bị làm mờ là tránh làm mờ bất kỳ thứ gì trong div đang hoạt ảnh (đặc biệt là văn bản). Trong khi cá nhân tôi không nghĩ đây là lựa chọn đúng đắn cho hành vi mặc định, bạn có thể thấy lý do here.