模糊的线性渐变停在chrome [英] Blurry linear gradient stops in chrome

问题描述

如果我使用具有多个止损的线性渐变，如下所示：

  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
免费。 / p>

Chrome
渐变颜色之间的转换模糊。
我重复使用一个位置定义一个新的颜色，所以在位置35，颜色从＃001500到#ffffff立即（或至少应该）。

IE
在Chrome中有一些模糊，但不太极端。像Chrome一样，如果div变得更高，则模糊度也会增加。

演示。

If I am using a linear gradient with multiple stops like this:

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 Problem free.

Chrome The transitions between gradient colors are blurry. I am reusing a position to define a new color, so on position 35, the color goes from #001500 to #ffffff instantly (or at least should). The blurryness between gradient stops increases if the div is taller.

IE There is some blurryness like in chrome, but less extreme. Like in Chrome, the blurryness increases if the div is made higher.

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

The gradient in firefox:

The gradient in chrome:

The gradient in chrome when the div is less tall (1000px instead of 2000px):

edit

It seems like this is fixed in chrome, but introduced in firefox. If anyone can confirm this, I would be happy.

解决方案

Not a fix to the problem, just a workaround… you can use multiple gradients as multiple backgrounds of a small enough size as to not trigger the problem (< ~300px seems to do it). Combine with background-size and background-position and you get something that is ugly, but works:

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;

See JSFiddle for demo.

这篇关于模糊的线性渐变停在chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！