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 animation:

Problem is that it works fine in chrome and firefox, but is inconsistent in safari. Sometimes it loads, sometimes it doesn't. Also seems to not load more often when coming to the homepage via a link on the site vs a hard reload.

Is there anything loading that could interfere with the animation? Any ideas why it wouldn't work on some loads?

The page it's happening on is http://www.peacenow.com and the CSS I'm using is:

 .marquee span {
  position: absolute;
  left: 0;
  top: 0;
  width: 7500px;
  -webkit-animation: moveSlideshow 165s linear infinite;
}

@-webkit-keyframes moveSlideshow {
  0%   { 
    -webkit-transform: translate(0, 0);  
  }    
  100% { 
    -webkit-transform: translate(-100%, 0);  
  }
}

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:

<p class="marquee" id="countries">

became this:

<p class="marquee-pre" id="countries">

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

<script>
    $('.marquee-pre').attr('class', 'marquee');
</script>

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