Chuyển đổi CSS nhấp nháy với: được truy cập trong Safari, Chrome và Firefox, nhưng không phải Opera

Question

(Đối với các trình duyệt hỗ trợ chuyển tiếp CSS, bao gồm các phiên bản Firefox, Safari và Chrome mới nhất. .)

Có ai khác nhận thấy điều này không? Khi bạn đặt một chuyển đổi màu trên một: liên kết, a: chuyển tiếp truy cập vào màu a: liên kết trước khi hiển thị màu a: hover. Hãy khám phá:

http://jsfiddle.net/Mgzv9/2/

Có thể tránh nhấp nháy màu này không?

Answer 1

Tôi chưa bao giờ thấy điều đó xảy ra khi sử dụng màu. Nhưng nó sẽ xảy ra khi sử dụng hình ảnh trong baground. Đây là bcoz của thời gian tải, và có thể tránh được bằng cách sử dụng tất cả các hình ảnh chuyển tiếp trong một hình ảnh lớn và sử dụng tài sản baground-vị trí để kiểm soát hình ảnh.

Answer 2

Tôi đã đập đầu xung quanh vấn đề này một lúc.

Vấn đề là, vấn đề này thực sự khó tái tạo. OK, vì vậy điều gì sẽ xảy ra, đôi khi trong khi tải/làm mới trang có chuyển đổi màu trên các liên kết, màu đầu tiên được chuyển từ màu liên kết trình duyệt mặc định sang màu được xác định bằng CSS. Nó thực sự không xảy ra với tôi, khi tôi mở HTML từ đĩa, nhưng nếu tôi đặt nó trong một máy chủ (ngay cả máy chủ địa phương), thì vấn đề này xuất hiện.

Để tạo lại vấn đề, tạo một HTML, thêm một stylesheet và xác định một sự chuyển tiếp cho các liên kết, một cái gì đó như thế này:

a { 
    color: red; 
    -webkit-transition: color .5s linear; 
    -moz-transition: color .5s linear; 
    -o-transition: color .5s linear; 
    -ms-transition: color .5s linear; 
    transition: color .5s linear; 
} 

a:hover { 
    color: green; 
} 

... và sau đó bao gồm các stylesheet trong HTML của bạn.

Đặt tệp trên máy chủ và thử mở trang trong Chrome, thử làm mới trang web, đôi khi bạn sẽ thấy chuyển tiếp từ màu xanh mặc định khi tải trang.

Sau khi deconstructing một số trang web, nơi mà dường như không có vấn đề với điều này, tôi đã đưa ra giải pháp đơn giản này.

Nếu bạn cũng bao gồm một số tệp Javascript, thì chỉ cần đặt Javascript bao gồm SAU CSS của bạn bao gồm.

Thậm chí nó còn hoạt động nếu bạn chỉ bao gồm tệp JS trống, sau biểu định kiểu.

Hy vọng điều này sẽ hữu ích!