Safari没有在css动画上方重新绘制元素答案

【问题标题】：Safari not repainting element above css animationSafari没有在css动画上方重新绘制元素
【发布时间】：2019-11-06 22:54:53
【问题描述】：

我的代码如下所示：

var text = document.getElementById('text');
var toggle = true;

setInterval(function(){
    if (toggle){
       text.innerHTML = 'text1';
    } else {
       text.innerHTML = 'text2';
    }
    toggle = !toggle;
}, 500)

#text{
    position: relative;
    background-color: white;
    z-index: 2;
    padding: 0 10px;

}
#marqueeContainer{
    z-index: 1;
}
@keyframes marquee{
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
#marquee {
    animation: marquee 10s linear infinite;
    display: inline-block;

}

<span id="text">
    text
</span>
    
<span id="marqueeContainer">
    <span id="marquee">
        marquee 
        marquee 
        marquee 
        marquee 
        marquee 
    </span>
</span>

或看这里： https://codepen.io/jacquesknie/pen/ZEExZNy

这个文本是用 setInterval 切换的，一旦有动画在 Safari 下运行，它就不会更新/重新绘制文本。 Chrome 和 Firefox 运行良好。发生了什么事，我是否忽略了一些明显的东西？

非常感谢，雅克

【问题讨论】：

有趣。当您从 #marquee 选择器中删除 display: inline-block; 样式时，它会按预期工作。不知道为什么。
我需要display: inline-block，因为我的实际代码看起来更像这样：codepen.io/jacquesknie/pen/dyyeZNG

标签： javascript html css safari

【解决方案1】：

在 Safari 上你必须使用

@-webkit-keyframes

见https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html

【讨论】：

不幸的是，这并没有改变任何东西。 Safari 仍然没有重绘。自版本 9 起，Safari 似乎也接受没有前缀的关键帧：caniuse.com/#feat=css-animation