在Chrome中重复背景渐变

Question

在this pen中，重复背景渐变的位置是动画的。这使谷歌浏览器呈现背景渐变错误。它在 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);