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:

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

Answer 2

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.