Chromium 中的 CSS 渐变非常粗糙

Question

我有一个线性渐变作为背景，它在 Firefox、Opera classic 等中运行良好，但在 Chromium(以及 Android 股票浏览器)中以 10px strip 跳跃。您可以看到没有平滑的渐变，而是 2 条条纹。

我的问题还在于我想要锐利的剪切(蓝色/白色)，但是由于 10px 的 strip ，剪切以 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 .左边的蓝色 block 应该正好是 1000px，和下面的控制 block 一样宽。它存在于 Firefox 和 Opera Classic 中，但不存在于 Chrome 和 Chromium 中。

Answer 1

这是 chrome 的“优化功能”- 参见 this SO question获取更多信息。从 Chrome 35 开始，您不能依赖渐变色标创建的列宽。

参见 this pen一个很酷的动画演示和指向错误的链接(它们也都在另一个 SO 问题中)。