JSFiddle Example

Question

我无法弄清楚这里发生了什么。

我正在更新一个仍然使用了marquee标记的网站，所以我用一个更平滑的（虽然，仍然是一个选框）css动画替换：

问题是它在chrome和firefox中运行良好，但在safari中不一致。有时它会加载，有时它不会加载。当通过网站上的链接进入主页而不是硬重新加载时，似乎也不会更频繁地加载。

是否有任何可能干扰动画的加载？任何想法为什么它不会在一些负载上工作？

它发生的页面是http://www.peacenow.com，而我使用的CSS是：

 .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.或者我会尝试使用更像浏览器的兼容方法，比如jQuery。

如果考虑到今天的浏览器用户群以及它们之间的兼容性，jQuery是您的最佳选择。 Look into jQuery .animate() 了解更多信息。

<script>
    $('.marquee').marquee(); // The code to start a simple marquee in JavaScript's jQuery Marquee Plugin
</script>

并且您需要通过从jQuery和jQuery Marquee下载jQuery和Marquee插件来加载它们，然后将它们与<script src="/path/to/script.js"></script>

链接起来

JSFiddle Example

P.S。从4年前开始，这对我的Androids 2.3浏览器起作用，因为基本的动画不是来自你的网站。让我们面对现实吧，并不是很多网上冲浪者实际上已经坐在电脑前了。

Answer 2

我认为有两种方法可以解决Safari的这个问题。

第一种是使用JavaScript来启动你的动画。

使用Charles代理，我操纵了响应，以便：

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

成了这个：

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

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

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

立即解决了这个问题。

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

如果您无法添加JS，或者不愿意，我发现对CSS动画进行以下更改也有效：

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

到：

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

虽然这有效，但我发现它并不像＃34;光滑＆＃34;使用线性时序...

CSS动画适用于Chrome，但不支持Safari

2 个答案:

JSFiddle Example