野生动物园CSS动画错误

Question

这在Chrome中可以正常运行，但在最新的Safari（和Safari Technology Preview和Webkit Nightly）中却得到了怪异的效果：这是滚动的简单CSS版本（例如“字幕”）。 文本坐在那里而不是滚动。 如果我将背景图片替换为背景色，则效果很好。 （为什么这样有意义？）如果我切换到其他选项卡并返回，则可以正常工作。 如果再重新加载该选项卡，它将再次消失。 这是代码：

<!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>