5

Khi thử chuyển tiếp CSS, tôi đã tạo một bản trình diễn cuộn nhỏ chuyển đổi kiểu số right css từ một số số âm thành 0 rồi khởi động lại khi sự kiện transitionend kích hoạt để có hiệu ứng cuộn vô hạn. Dưới đây là Fiddle với bản trình diễn của tôi - http://jsfiddle.net/XhFdv/Đặt lại các chuyển tiếp CSS trong Internet Explorer 10

Tính năng này hoạt động trong FF, Chrome, Safari (win) và Opera mới nhất. Trong IE 10 (thử nghiệm trên cả Win 7 và Win 8) sự kiện cháy, nhưng cố gắng thiết lập đúng thuộc tính về số âm mà nó bắt đầu có vẻ không hoạt động - nó thường là 0 sau khi được thiết lập (nhưng không luôn luôn).

Để làm cho mọi thứ trở nên thú vị hơn, hãy thêm console.log() hoặc alert() thường đủ để làm cho nó hoạt động như mong đợi. Điều này làm cho tôi nghĩ rằng có điều gì đó chưa hoàn thành trong lớp giao diện người dùng. Tôi đã cố gắng bọc thêm các cài đặt kiểu trong một setTimeout(..., 0) để hiển thị có thể bắt kịp, nhưng điều đó dường như không giúp ích gì.

Đây có phải là lỗi trong IE 10 hay là có điều gì đó tôi bị thiếu trong tập lệnh demo?

+0

Tôi đã nhìn thấy những loại lỗi trước và họ chắc chắn là một nỗi đau. Thông thường một thời gian chờ hoạt động nhưng tôi đoán không phải trong trường hợp này. Tôi sẽ có thời gian để fiddle ngày mai vì vậy tôi sẽ lấy lại cho bạn về điều này; rất đặc biệt! –

+0

tôi đã tăng thời gian chờ setTimeout lên tới 10-20 ms và nó chỉ hoạt động đối với tôi. –

+2

Tôi đã gửi một lỗi với Microsoft cách đây vài tháng. Tôi tin rằng họ đã có thể tái tạo vấn đề và coi đó là một lỗi ứng cử viên để sửa lỗi trong một trong những bản phát hành chính tiếp theo. Tôi đã không làm cho IE 11, thật không may. – mld

Trả lời

1

alert() hoạt động vì nó chặn thực thi tập lệnh. Như một biện pháp thứ: một cái gì đó gây nên một repaint hoặc reflow sẽ là điều tốt nhất tiếp theo:

  • Chuyển đổi visibility:hidden/visible qua một lớp thuộc tính thay đổi
  • Chuyển đổi visibility:hidden/visible qua một phong cách thuộc tính thay đổi
  • Thêm một stylesheet qua CSSOM
  • Ẩn một yếu tố qua display:none
  • Tính offsetWidth hoặc offsetHeight
  • Tr iggering một sự kiện scroll
  • Triggering một pseudo-class :hover trên anh chị em ruột của nguyên tố này trong câu hỏi

Tài liệu tham khảo