CSS Gradient在Chromium中非常粗糙

Question

我有一个线性渐变作为背景，在Firefox，Opera经典等中运行良好，但在Chromium（以及Android股票浏览器）中跳过10px条带。你可以看到没有平滑的渐变而是2条纹。

我的问题还在于我想要一个锐利的切割（蓝色/白色），但由于10px条带，切割以10px步长而不是1px跳跃。我这里有蓝色框，应该与渐变对齐，但不是因为这些10px步骤。

background: -webkit-gradient(linear, left top, right top, color-stop(0px,#247), color-stop(800px,#247), color-stop(800px,#fff), color-stop(820px,#fff), color-stop(820px,#247), color-stop(1000px,#247)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #247 0px,#247 800px,#fff 800px,#fff 820px,#247 820px,#247 1000px); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to right, #247 0px, #247 800px, #fff 800px, #fff 820px,#247 820px, #247 1000px); /* W3C */

我也在使用所有其他前缀版本（-moz，-o，-ms）。

编辑：好的，我应该先添加一个演示，这里是：Codepen DEMO。左蓝色块应精确为1000px，与下面的控制块一样宽。它适用于Firefox和Opera Classic，但不适用于Chrome和Chromium。

Answer 1

这是一个优化功能＆＃34;铬 - 请参阅this SO question了解更多信息。从Chrome 35开始，您不能依赖渐变颜色停止创建的列宽。

请参阅this pen获取一个很酷的动画演示，并链接到bug（这些都是另一个SO问题）。

Answer 2

为什么不使用渐变生成器？

1. http://gradients.glrzad.com/

2. http://www.colorzilla.com/gradient-editor/

甚至来自microsoft http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/