Safari не перерисовывает элемент выше CSS анимации

Question

мой код выглядит так:

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 ведут себя просто отлично. Что происходит, я пропускаю что-то очевидное?

Большое спасибо, Жак

Answer 1

В Safari вы должны использовать

@-webkit-keyframes

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