CSS Animation works in Chrome but not Safari

Question

I can\'t figure out what\'s going on here.

I was updating a site that still had a marquee tag in use, so I replaced with a much smoother (though, still a marquee) css an

Answer 1

I think there are two ways you can address this issue for Safari.

The first is using JavaScript to kickstart your animation.

Using Charles proxy, I manipulated the response so that this:

became this:

Then, I injected the following JS at the bottom of the page:

which immediately addressed the issue.

If you don't mind adding JS to your page, I would recommend this approach.

If you can't add JS, or prefer not to, I found making the following change to the CSS animation also worked:

 .marquee span {
      -webkit-animation: moveSlideshow 165s  linear infinite;
 }

to:

 .marquee span {
      -webkit-animation: moveSlideshow 165s steps(10000) infinite;
 }

While this works, I found it wasn't as "smooth" as using linear timing...