CSS Animation works in Chrome but not Safari - css

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

Try looking at Safari's methods for animation. Alternately I'd try using a more cross browser compatible method like jQuery.
jQuery is your best option if you take into consideration todays browser user-base, and compatibility between them. Look into jQuery .animate() for more information.
<script>
$('.marquee').marquee(); // The code to start a simple marquee in JavaScript's jQuery Marquee Plugin
</script>
and you'll need the jQuery and Marquee Plugins loaded by downloading them from jQuery and jQuery Marquee and then link them with <script src="/path/to/script.js"></script>
JSFiddle Example
P.S. This does work on my Androids 2.3 browser from 4 years ago where as the basic animation doesn't from your website. And let's face it, not many web surfers are actually sitting at a computer anymore.

Answer 2

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