css - 模糊的线性渐变在 chrome 中停止

Question

如果我像这样使用具有多个停止点的线性渐变:

div
{
  border: 1px solid black;
  width: 100px;
  height: 2000px;
  display: inline-block;
  background-image: linear-gradient(to bottom, #383937 0, #001500 35px,
    #ffffff 35px, #b0b0b0 150px, #ffffff 150px, #ffffff 100%);
}

火狐没有问题。

Chrome渐变颜色之间的过渡是模糊的。我正在重复使用一个位置来定义新颜色，因此在位置 35 上，颜色立即从 #001500 变为 #ffffff(或至少应该)。如果 div 更高，渐变停止点之间的模糊度会增加。

浏览器有一些像 chrome 一样的模糊，但不那么极端。就像在 Chrome 中一样，如果 div 变高，模糊度会增加。

http://jsfiddle.net/cyq7grdr/5/

firefox 中的渐变:

chrome 中的渐变:

当 div 较低时(1000px 而不是 2000px)chrome 中的渐变:

编辑

这似乎是在 chrome 中修复的，但在 firefox 中引入了。如果有人能证实这一点，我会很高兴。

Answer 1

这不是解决问题的方法，只是一种解决方法……您可以使用多个渐变作为多个背景，且背景足够小，不会触发问题(< ~300px 似乎可以做到)。结合 background-size 和 background-position ，你会得到一些丑陋但有效的东西:

background-image:
    linear-gradient(to bottom, #383937 0, #001500 35px, #ffffff 35px, #b0b0b0 150px),
    linear-gradient(to bottom, #963 0, #abc 150px);
background-size:
    100px 150px,
    100px 150px;
background-position:
    0 0,
    0 150px;
background-repeat: no-repeat;

参见 JSFiddle用于演示。