问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/26652661/blurry-linear-gradient-stops-in-chrome

标签

css