在 Chrome 中重复背景渐变

Question

在this pen 中，重复背景渐变的位置是动画的。这使得 Google Chrome 呈现 背景渐变 错误。它在 Mozilla Firefox 中运行良好。

我该如何解决？

对于我的身体背景渐变，我使用了这个：

background-image: repeating-linear-gradient(40deg, #d61e29 0px, #661011 40px);

动画是bg：

animation: bg 15s infinite linear;

Answer 1

我相信它与这个错误有关 - https://code.google.com/p/chromium/issues/detail?id=162538。如果您取消将背景大小设置为 200%，您会看到渐变稍微清晰一些。如果你把它减少到 50%，它就会变得光滑。我认为您将不得不对动画背景采取另一种方法。另请注意，将角度设置为 0 会产生平滑的渐变。

尝试给定一个固定的背景大小，实际上是平铺它，这样平铺看起来很漂亮。背景尺寸：100px 100px；不确定获得正确尺寸的确切尺寸。这是一个代码笔 - http://codepen.io/anon/pen/vuFod;

background-size: 100px 100px
background-image: -webkit-repeating-linear-gradient(45deg, #d61e29 0px, #661011 71px);