Webkit cho窒息，以呈现多个文本阴影和使用webkit-transition的盒子阴影值

StackOverflow https://stackoverflow.com/questions/3942971

题

CSS3 -Webkit-Transition正在窒息多个盒子阴影值和文本阴影值。 （Chrome＆Safari）

更具体地说，我有两种情况...

  1. 我有文本有一个文档标题，该文档具有三个文本遮阳（用于深度的外观）。我还使用-webkit-transition规则来改变悬停在悬停的文本阴影的颜色，以使其在悬停上发光。

  2. 我有以与上述方式相同的方式使用的框架规则的链接，深度效果具有三个值。还可以在此处使用-webkit -transition更改按钮和文本的颜色，以产生悬停效果。

问题：对于上面的两个实例，当悬停在元素上时，webkit似乎一次将过渡呈现为一个，因此这些值不会同时逐渐淡入其新值。取而代之的是，它们看起来像每个人一样 - 一个接一个地，这是一个非常尴尬的过渡。

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

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

- 盒子阴影过渡：悬停在第1幻灯片呼叫的操作（“阅读更多”按钮）： http://cure.org

- 盒子阴影过渡：悬停在页脚导航式链接（关于，杆等）： http://tuscaroratackle.com

最后，这是我正在使用的代码的示例：（（不是从任何站点中，只是我为这个问题构建的一个示例；在这里看到它： http://joelglovier.com/test/webkit-hadow-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中使用不同的语法？ （例如，多个盒子阴影值的特定顺序，或使用多个盒子阴影声明而不是将它们全部添加到一个规则中？）

2011年5月9日更新：该错误已报告给Webkit（请参阅下面的Husar评论）。另外，我看到Chrome最近的构建（特别是我当前的10.0.648.205版本）现在正在呈现平滑的过渡，有效地消除了错误。但是，Safari（版本5.0.5（6533.21.1））仍然显示出越野车渲染。

有帮助吗？

解决方案

显然是 只是一个错误 使用Webkit渲染，没有明显的修复。

其他提示

我还注意到，例如，当您使用jQuery简单地淡入文本时，请“打kit”。因此，基本上，我要去肢体说，我认为您的特殊风格与它没有任何关系。我可能完全错了。如果您发现这笔交易是什么，我很想听听解决方案，因为我也遇到了一两次的烦恼。

这可能有助于解决此问题，以呈现悬停事件

                -webkit-transform: translateZ(0px);
                -moz-transform: translateZ(0px);
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top