Safari无法重新绘制CSS动画上方的元素

我的代码如下:

var x = (from e in EmpDB.Employees
      join d in EmpDB.Departments on e.DepId equals d.Id
      join s in EmpDB.EmpSalaries on new { d.Zone,d.Vendor,d.Status } equals new { s.Zone,s.Vendor,s.Status}
      where e.Status = "active" && e.BAID != NULL && e.DepId == 3
      select s.Salary ?? 0)
      .Sum();
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;

}

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

有一个用setInterval切换的文本,并且在Safari下面运行的动画不会更新/重新绘制该文本。 Chrome和Firefox的运行情况还不错。发生了什么,我是否忽略了一些明显的东西?

非常感谢, 雅克

alwvp 回答:Safari无法重新绘制CSS动画上方的元素

在Safari上,您必须使用

@-webkit-keyframes

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

本文链接:https://www.f2er.com/3151224.html

大家都在问