CSS动画作品在Chrome，但不是Safari浏览器 [英] CSS Animation works in Chrome but not Safari

问题描述

我想不通这是怎么回事的。

我正在更新一个网站，仍然有使用中的字幕标记，所以我有一个更加顺畅（虽然仍然是一个字幕）CSS动画取代：

问题是，它工作在Chrome和Firefox罚款，但在Safari浏览器不一致。有时它加载，有时没有。也似乎通过VS硬性重新加载在网站上的链接来网页时不加载较多。

有什么加载可能与动画干扰？任何想法，为什么它不会对一些负荷工作？

这是发生在该页面 http://www.peacenow.com 和CSS我使用是：

  .marquee跨度{
  位置：绝对的;
  左：0;
  顶部：0;
  宽度：7500px;
  -webkit-动画：moveSlideshow 165s线性无穷;
}@ -webkit-关键帧moveSlideshow {
  0％{
    -webkit-变换：翻译（0，0）;
  }
  100％{
    -webkit-变换：翻译（-100％，0）;
  }
}
 

解决方案

我觉得有两种方法可以解决这个问题的Safari浏览器。

第一种是使用JavaScript的kickstart动画。

使用查尔斯代理，我操纵的响应，使这样的：

 ＆LT; p =级金字招牌ID =国家＆GT;
 

这成了：

 ＆LT; p =类marquee- preID =国家＆GT;
 

然后，我注入下面的JS在页面的底部：

 ＆LT;脚本＆GT;
    $（'marquee- pre'）ATTR（'类'，'字幕'）。
＆LT; / SCRIPT＆GT;
 

这立即解决的问题。

如果你不介意JS添加到您的网页，我会推荐这种方法。

如果您不能添加JS，或preFER不，我发现作出以下更改CSS动画还曾：

  .marquee跨度{
      -webkit-动画：moveSlideshow 165s线性无穷;
 }
 

到

  .marquee跨度{
      -webkit-动画：moveSlideshow 165s步（10000）无限;
 }
 

虽然这个作品，我发现这是不作为平滑为使用线性时序...

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);  
  }
}

解决方案

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

这篇关于CSS动画作品在Chrome，但不是Safari浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！