Question

CSS3 -webkit-transition对多个box-shadow值和text-shadow值造成阻塞。（Chrome＆amp; Safari）

更具体地说，我有两个场景......

我的文字有一个文档标题，有三个文字阴影（深度外观）。我还使用-webkit-transition规则来更改悬停时文本阴影的颜色，使其在悬停时显示为发光。
我有链接，我正在以与上面相同的方式使用盒子阴影规则，有三个深度效果值。此处还使用-webkit-transition来更改悬停效果的按钮和文本的颜色。

问题：对于上述两个实例，当悬停在元素webkit上时，似乎一次一个地呈现转换，因此值不会同时淡入其新值。相反，它们会在每个渲染时出现 - 一个接一个，这是一个非常尴尬的过渡，你会看到。

我有几个实例，这里有一些链接：（确保在Chrome或Safari中查看）

- 文字阴影过渡：悬停在第h1页（“治愈礼物”文字）：http://cure.org/goh

-Box-shadow转换为：悬停第一次幻灯片调用操作（“阅读更多”按钮）：http://cure.org

-Box-shadow转换：悬停于页脚导航链接（关于，杆等）：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声明而不是将它们全部添加到一个规则中？）

05/09/2011更新：已向Webkit报告该错误（请参阅下面的Husar评论）。此外，我发现最近的Chrome版本（特别是我目前的10.0.648.205版本）现在正在呈现平滑过渡，有效地消除了这个错误。然而，Safari（版本5.0.5（6533.21.1））仍然显示错误渲染。

Answer 1

显然这是just a bug的webkit渲染，并没有明显的修复。

Answer 2

我也注意到，当你使用jQuery时，简单地淡入或淡出文本，WebKit“打嗝”。所以基本上，我会说我不认为你的特殊风格与它有任何关系。我可能完全错了。如果你知道这笔交易是什么，我很乐意听到解决方案，因为我也有一两次遇到这种烦恼。

Answer 3

这有助于解决悬停事件的渲染问题

                -webkit-transform: translateZ(0px);
                -moz-transform: translateZ(0px);

Webkit窒息渲染多个文本阴影＆amp;具有webkit-transition的box-shadow值

3 个答案: