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

回答

相关问题