Chrome中CSS3颜色过渡效果无法正常工作

Question

左侧菜单中的链接在此网站使用了CSS3过渡属性color，鼠标悬停时会改变颜色。在Chrome 16或17中无法正常工作（颜色变化突然），但是网站中的其他过渡效果可以正常工作。它可以在Firefox、Opera甚至使用与Chrome相同的Webkit浏览器的Safari中正常工作，因此我不认为这可能是我的CSS出了问题。那么问题出在哪里呢？

这部分的CSS代码如下（完整的CSS在这里）：

#menu a
{
color: gray;
transition: color 0.5s;
-moz-transition:color 0.5s; /* Firefox 4 */
-webkit-transition:color 0.5s; /* Safari and Chrome */
-o-transition:color 0.5s; /* Opera */
}

#menu a:visited
{
color: gray;
}

#menu a:hover
{
color: black;
}

更新！ 显然，这个问题可能已经在18 beta中得到解决了。但是，如果您遇到了这个问题，请访问下面接受答案中链接的错误报告并标记该问题。

- Abhranil Das

---

适用于我（Chrome 15）http://jsfiddle.net/Kyle_Sevenoaks/YJFqk/1/ - Kyle

在我的Chrome 16上也可以工作。现在这真是个糟糕的事情。为什么同样的代码不能在我的网站上工作呢？ - Abhranil Das

在你的网站上对我也有效 :) 尝试不要使用程序的beta版本，它们并不总是那么稳定。 - Kyle

无论在哪里都不起作用。尝试了Chrome的最新稳定版和最新测试版，还使用了Google Web Fonts。 - Simon

应该在最新的稳定版本（15）中工作。最新的测试版（16）存在一个错误。Darren在其中一个答案中提供了错误报告的链接。 - Abhranil Das

@KyleSevenoaks：它最初可以工作，但如果您单击链接，它将停止工作（因为链接变为“:visited”）。 - Robert Koritnik

Answer 1

@Nijikokun 我可以确认同样的事情。:visited链接在Chrome中没有正确的过渡效果。好消息是，这似乎是16版本中出现的问题，但从未得到修复。在Chromium网站上有几个未解决的错误报告。

http://code.google.com/p/chromium/issues/detail?id=101245&q=visited%20transition&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20Area%20Feature%20Status%20Owner%20Summary

- Darren Kovalchik

---

请求在遇到问题后来到此处的开发者给这个错误报告链接点赞，以便更加重视该问题。请注意，点赞不代表解决问题。 - Abhranil Das

似乎Chrome 18版本会修复这个问题。 - Anto

在23.0.1271.60 beta-m版本中仍然存在相同的错误行为。 - rovsen

谢天谢地我找到了这个，真的开始让我烦躁了，我以为我快要变成脑残了，因为似乎改变链接颜色是不可能的。感谢您的帖子+1!!! - cwiggo

他们在26版本中修复了:before和:after，我认为:visited也是如此，至少链接的合并问题上是这样说的。 - Nijikokun

Answer 2

我试图找到一个解决方法（更多细节请参见我的博客：http://kyuumeitai.posterous.com/the-case-of-the-chromes-transition-hover-bug）

看起来如果你声明了一个带有透明颜色的:visited（颜色，背景，边框颜色等），它将作为一种解决方法。 我还没有进行过广泛测试，很高兴收到反馈。

- Álex Acuña Viera

---

你的演示对我来说可以运行，但它只是background的过渡。我认为这个bug只会发生在color上。 - Abhranil Das

你可以通过改变透明度来实现同一颜色之间的过渡。 - Álex Acuña Viera

@ÁlexAcuñaViera，将颜色不透明度更改为0对我没有起作用。不过背景还好。 - bozdoz

Answer 3

这不是一个“无法工作”的问题，而是由于“:visited”链接没有过渡效果。如果您没有点击它，它可能会正常工作，但如果您已经点击了它，它将无法工作。

我不知道解决方案，我还在寻找...

- Nijikokun

---

我并不认为这是我的问题。我清除了缓存，打开了一个新的无痕窗口等等，但颜色仍然没有过渡。所以这不是一个:visited的问题。我在另一个页面中也看到了这个color转换的问题，其中变化再次发生在正常和:hover之间。无论如何，在这个版本的Chrome中，color转换存在问题。 - Abhranil Das

Nijikokun的建议对我有用。我和你Abhranil一样遇到了同样的问题，清除缓存使得未访问链接的转换工作正常，包括使用和不使用Google Web Font。但是所有已访问链接都停止工作了。 - Simon

@AbhranilDas，据说这个问题在18版本中已经修复了。 - Nijikokun

@Nijikokun，是的，几周前我更新了我的问题，包括那些信息。 - Abhranil Das

Answer 4

. . 我认为需要注意的是这不是一个错误，而是有意行为。引用Mozilla 开发者文档:

对 Web 开发人员的影响

总体而言，这不应对 Web 开发人员产生太大影响。但是，有一些特殊情况可能需要更改网站：

(...)

已访问链接将不支持 CSS 过渡。幸运的是，CSS 过渡非常新颖，在此时使用它们的站点很少，因此这不太可能影响到很多人。

- diego nunes

Answer 5

正如 Darren Kovalchik 在他的答案中所写（https://dev59.com/3moy5IYBdhLWcg3wiecp#8524199），Chrome 存在这个 bug。

一个可能的解决方法是在链接的父元素上应用颜色动画，并将链接的颜色设置为 inherit。在这种情况下，即使链接被 :visited 访问过，动画也可以正常工作。

html：

<span class="whateverLinkParent">
    <a href="#">whateverLinkText</a>
</span>

css：

.whateverLinkParent { animation: whateverTextColorAnimation 1s infinite; }
.whateverLinkParent a { color: inherit; }
@keyframes whateverTextColorAnimation {
    0%, 100% { color: #686765; }
    50% { color: #2E2D2B; }
}

当然，如果设置链接父元素的颜色是一个问题，这种解决方法就行不通了，但在其他情况下，它提供了一种简单而干净的解决方案。

- Burnee

Answer 6

尝试使用 #ccc 和 #000 而不是 gray 和 black。

编辑：像这样：http://jsfiddle.net/qtzEj/

希望能有所帮助 :)

- will

---

没有，没成功啊 :-( 不过还是谢谢。顺便问一下，你在Chrome里能用吗？ - Abhranil Das

是的，我在beta频道上。但那很简单...试着重新启动Chrome？我知道我的有时会在更新后破坏转换（特别是3D）... - will

我不认为那是问题，威尔。凯尔上面的例子使用了“灰色”和“黑色”，在我的Chrome 16中仍然有效。但是不知何故，同样的代码在我的网站上却不起作用。 - Abhranil Das

Answer 7

我的两个链接转换工作正常，但其余的在Chrome中无法工作。它们都使用相同的设置。 奇怪的是，当链接为mailto:或callto:时，它们可以正常工作。

- popotan

---

这是一个Chrome的bug。请按照Darren在其中一个答案中提供的链接并标记该bug报告。 而且，由于您的帖子不是答案，最好将此类帖子添加为评论。 - Abhranil Das

Answer 8

如果您从 :visited 行为中删除颜色，则应按预期工作。当在 :visited 行为中设置颜色时，即使没有过渡，:hover 颜色也无法按预期工作。

- rovsen

Answer 9

我仍然遇到了同样的问题，并找到了适合我的解决方案。

我通过使用:link伪类来修复它，就像这样：

#menu a, #menu a:link {
  color: gray;
  transition: color 0.5s;
}

#menu a:hover {
  color: black;
}

- sam