CSS3 -webkit-transition 阻塞了多个 box-shadow 值和 text-shadow 值。(Chrome & Safari)
更具体地说，我有两种情况......
我的文本有一个文档标题，该标题具有三个文本阴影（用于显示深度）。我还使用 -webkit-transition 规则来更改悬停时文本阴影的颜色，使其在悬停时看起来发光。
我有链接，我以与上面相同的方式使用 box-shadow 规则，具有三个深度效果值。还在这里使用 -webkit-transition 来更改按钮和文本的颜色以实现悬停效果。
问题：对于上述两种情况，当将鼠标悬停在元素上时，webkit 似乎一次将转换呈现为一个，因此这些值不会同时全部淡入它们的新值。相反，它们会随着每一个的渲染出现——一个接一个，你会看到这是一个非常尴尬的过渡。
我有几个实例，这里是其中一些的链接：（确保在 Chrome 或 Safari 中查看）
- 文本阴影过渡：h1 页的悬停（“治愈的礼物”文本）：http ://cure.org/goh
-Box-shadow 过渡：悬停在第一张幻灯片号召性用语（“阅读更多”按钮）：http ://cure.org
-Box-shadow 过渡：悬停在页脚导航链接（关于、Rods 等）：http ://tuscaroratackle.com
最后，这是我正在使用的代码示例：（不是来自任何网站，只是我为这个问题构建的一个示例；在这里查看它：http: //joelglovier.com/test/webkit-shadow-transition-bug .html )
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
ul {
overflow:hidden;
width:500px;
height:auto;
margin:50px 100px;
background:rgba(0,0,0,.4);
border:1px solid rgba(0,0,0,1);
-webkit-border-radius:10px;
-webkit-box-shadow:inset 0px 0px 5px rgba(255,255,255,.5),0px 2px 10px #6e5e4c;
-webkit-transition:all .5s ease;
}
ul:hover {
-webkit-box-shadow:inset 0px 0px 10px rgba(255,255,255,.5),0px 2px 10px #92d400;
}
li {
display:inline-block;
}
a:link,a:visited {
float:left;
display:block;
padding:6px 10px;
margin:10px 20px;
font:bold 18px/22px Tahoma,Helvetical,Arial,sans-serif;
text-decoration:none;
color:#000;
background:#92d400;
-webkit-border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0px #b7f52f,0px 4px 0px #5c8500,0px 3px 10px #000;
-webkit-transition:all .5s ease;
}
a:hover,a:focus {
background:#198c45;
-webkit-box-shadow:inset 1px 1px 0px #1ac65c,0px 3px 0px #046228,0px 3px 10px #fff;
}
a:active {
position:relative;
top:1px
}
</style>
</head>
<body>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
</ul>
</body>
</html>
所以这里的问题真的是有什么办法可以防止这种有序的渲染，比如在我的 CSS 中使用不同的语法？（例如多个 box-shadow 值的特定顺序，或者使用多个 box-shadow 声明而不是将它们全部添加到一个规则中？）
2011 年 5 月 9 日更新：该错误已报告给 Webkit（请参阅下面 Husar 的评论）。此外，我看到 Chrome 的最新版本（特别是我当前的 10.0.648.205 版本）现在正在呈现平滑过渡，有效地消除了错误。然而 Safari（版本 5.0.5 (6533.21.1)）仍然显示错误的渲染。