CSS過渡會在Safari瀏覽器，Chrome瀏覽器和Firefox瀏覽器中閃爍，但不會瀏覽Opera

（適用於支持CSS過渡的瀏覽器，包括最新版本的Firefox，Safari和Chrome）奇怪的是，這個問題沒有出現在Opera ）CSS過渡會在Safari瀏覽器，Chrome瀏覽器和Firefox瀏覽器中閃爍，但不會瀏覽Opera

有沒有其他人注意到了這一點？將顏色轉換放置在：鏈接上時，在顯示a：懸停顏色之前，a：visited會轉換爲a：link顏色。檢查出來：

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

可以這樣彩色閃爍避免？

來源

2011-10-18 Zade

而最新的Chrome甚至不會對訪問過的鏈接進行轉換...... – Zade

我從來沒有看到它發生在使用顏色。但是，當在baground中使用圖像時會發生這種情況。這是加載時間的縮影，可以通過在一個大圖像中使用所有過渡圖像並使用baground-position屬性來控制圖像來避免。

來源

2011-10-18 07:09:11 Exor

它發生在三種最新的瀏覽器中;檢查JSFiddle。 – Zade

我一直在圍繞這個問題猛撞一段時間。

問題是，這個問題實際上很難重現。

好的，所以會發生什麼，有時在加載/刷新鏈接上的顏色過渡的頁面時，顏色首先會從默認瀏覽器鏈接顏色轉換爲CSS定義的顏色。當我從磁盤打開HTML時，它實際上不會發生，但如果我將它放入服務器（甚至是本地服務器），那麼就會出現此問題。

要重現該問題，創建HTML，添加一個樣式表，定義這樣的鏈接過渡，東西：

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; 
}

...然後在HTML樣式表。

將文件放在服務器上，然後嘗試在Chrome中打開頁面，嘗試刷新網站，有時您應該首先看到加載頁面時默認藍色的過渡。

解構一些網站後，似乎沒有問題，我想出了這個簡單的解決方案。

如果您還包含一些Javascript文件，那麼只需放置Javascript包括AFTER您的CSS包含。

它甚至可以工作，如果你只是在樣式表之後包含一個空的JS文件。

希望這會有所幫助！

來源

2011-12-05 11:00:42

有趣。我沒有找到你的Javascript修復有任何區別。例如，查看soulmastery.net。我也沒有發現查看本地文件和服務器文件之間的任何區別。問題仍然存在於Safari 5.1.2和Firefox 8.0.1（運行OS X Lion）。幸運的是，Chrome已經解決了這個問題（在15.0.874.121中）。 – Zade

該bug /功能（很難說，因爲它顯然是一些預期行爲的結果）仍然存在Chrome 25和FF 24 - 但修復工程。我把我的JS *放在頭標籤*上，（你應該把它放在* css鏈接之後*） - 它起作用了！引用：「頭部中的任何東西都必須在body加載完成之前完成，因此將javascript放在那裏通常是個不錯的主意。如果你在加載body時需要某些東西，或者想加快某些Ajax，那麼它會是適合把它放在頭上。「這適用於例如wp_head（）[WordPress]，它應該在*之前*。 – vaxquis

CSS過渡會在Safari瀏覽器，Chrome瀏覽器和Firefox瀏覽器中閃爍，但不會瀏覽Opera

回答

相關問題