尝试在 Chrome 中创建无限滚动横幅答案

【问题标题】：Trying to create an infinite scrolling banner in Chrome尝试在 Chrome 中创建无限滚动横幅
【发布时间】：2014-08-02 02:47:31
【问题描述】：

我整天都在尝试使用 CSS3 动画创建无限滚动横幅。这些是我的要求：

当您在 Chrome 中缩小时，您可以看到横幅的结尾。正如@bjb568 所指出的，这可以通过设置width: 1000% 来解决。但是，如果您在缩小后刷新页面，然后再放大到 100%，您会发现它不再完美循环，并且滚动速度比以前慢了很多。

由于某种原因，这不能很好地与 Chrome 的缩放功能配合使用。我尝试使用 em 但这并没有解决它。有人可以帮帮我吗？

Tl;dr：在 Chrome 中，缩小、刷新和重新放大后，要求 2 和 3 失败。

【问题讨论】：

如果我错了，请纠正我，但在我看来，您正在尝试解决我不会考虑正常用户行为的问题。我想说的不要太关注非标准行为，因为你很可能不会再遇到这种情况，除非现在，在开发过程中......假设有人真的以 50% 的视口浏览，他很可能不会注意到动画“太慢”，他会认为这是应该的速度......不过我会看看;）
对我来说，不只是使用非 100% 视口时速度下降，动画本身循环不正确。（见下面的 cmets @bjb568's answer）但似乎并不是每个人都得到了这种行为。

【解决方案1】：

所以在尝试之后，我只使用 CSS 时没有找到解决方案，但我很确定您在 Chrome 中的速度问题与您使用 calc 相关：

~~calc()~~ width在开始时计算，然后它具有宽度并分配速度以在您设置的时间（5s）内完成动画。因此，取决于100% + 600px 在您的页面呈现多长时间时，设置的速度就是您获得的速度，无论您之后调整什么大小。

解决您的问题的一个可能解决方案是在每次缩放更改时强制element to repaint，这需要一点 JS。

这应该可以解决您的速度问题，因为 chrome 会在缩放时重新计算宽度和速度。

希望这会有所帮助。

更新：

所以我认为问题是由使用 calc 引起的假设不正确，正如 @bjb568 评论的那样。在他的回答中，他只使用了百分比，没有使用calc，但他的结果中存在同样的问题。

Chrome 在两种情况下都会在缩放时更改div 的宽度（无需任何额外的 JS）。因此，Chrome 会以您期望的方式处理此问题。

Chrome 实际上没有做的是重新绘制（重新计算）动画，该动画是在加载时设置的。要解决此问题，您需要额外的 JS 来告诉 Chrome 在每次视口更改时重新绘制 div。

【讨论】：

谢谢，现在它工作得很好。但是，我很好奇：el.offsetHeight; 是做什么的？对我来说，这似乎是一个无用的声明，但没有它，它就行不通。
el.offsetHeight 来自这个答案：stackoverflow.com/a/3485654/2102463 我没有想到 ;)
如果是calc的问题，为什么我的回答有时不起作用？
你是对的，这不是calc 的问题！我在答案中更改了这一点，并更清楚地指出了实际原因。动画在加载时设置，缩放时不重新计算（与 width 正在重新计算相反）

【解决方案2】：

http://jsfiddle.net/sREjt/1/

width: 1000%;

让它变得巨大™。那么除非你真的快速缩放，否则不会有问题。

这适用于 Chrome、Safari 和 FireFox。

【讨论】：