Question

这在Chrome中运行良好，但我在最新的Safari（和Safari技术预览版，以及每晚的Webkit）中得到了一个奇怪的效果：它是一个简单的滚动CSS版本（如“marquee”）。文本位于那里而不是滚动。如果我用背景颜色替换背景图像，它工作正常。（为什么这是相关的？）如果我切换到另一个选项卡＆amp;回来，它工作正常。如果我重新加载标签，它会再次死亡。这是代码：

<!doctype html>
<html>
<head>
<style type="text/css">
body { background-image: url('http://insti.physics.sunysb.edu/~siegel/z-machine.jpg');
color:white }
@keyframes scroll {
0% { transform: translateY(100%); }
100% { transform: translateY(0%); }
}
@-webkit-keyframes scroll {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(0%); }
}
@-moz-keyframes scroll {
0% { -moz-transform: translateY(100%); }
100% { -moz-transform: translateY(0%); }
}
@-o-keyframes scroll {
0% { -o-transform: translateY(100%); }
100% { -o-transform: translateY(0%); }
}
.scroller {
height: 100%; vertical-align:top;
animation-name: scroll; -webkit-animation-name: scroll; -moz-animation-name: scroll; -o-animation-name: scroll;
animation-duration: 5s; -webkit-animation-duration: 5s;
     -moz-animation-duration: 5s; -o-animation-duration: 5s;
animation-timing-function: linear; -webkit-animation-timing-function: linear; 
    -moz-animation-timing-function: linear; -o-animation-timing-function: linear;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; 
}
</style>
</head>
<body>
<div style="height: 1000px; position: relative;"><p class="scroller">stuff</p></div>
</body>
</html>

safari css animation bug

0 个答案: