模糊的线性渐变停止在铬

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%);
}

Firefox没有 问题.

Chrome 渐变颜色之间的过渡模糊.我正在重新使用一个位置来定义一种新颜色,所以在位置35,颜色立即从(#001500)变为#ffffff(或者至少应该).如果div更高,则渐变停止之间的模糊度会增加.

IE 有一些像铬一样的模糊,但不那么极端.就像在Chrome中一样,如果div更高,模糊性会增加.

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

firefox中的渐变:

铬的渐变:

当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以获取演示.