Joe*_*ier 6 css webkit css3 css-transitions
CSS3 -webkit-transition对多个box-shadow值和text-shadow值造成阻塞.(Chrome和Safari)
更具体地说,我有两个场景......
我的文本有一个文档标题,有三个文本阴影(深度的外观).我还使用-webkit-transition规则来改变悬停时文本阴影的颜色,使其在悬停时看起来发光.
我有链接,我正在以与上面相同的方式使用盒子阴影规则,有三个深度效果值.此处还使用-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声明而不是将它们全部添加到一个规则中？)
05/09/2011更新:已向Webkit报告该错误(请参阅下面的Husar评论).此外,我发现最近的Chrome版本(特别是我目前的10.0.648.205版本)现在正在呈现平滑过渡,有效地消除了这个错误.然而,Safari(版本5.0.5(6533.21.1))仍然显示错误渲染.
| 归档时间： |
|
| 查看次数： |
3440 次 |
| 最近记录： |