Blurry linear gradient stops in chrome

Question

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.

Answer 1

I just had this requirement in a project and solved it this way:

Let's say we want the color change to be 50%.

• We must place the gradient of the first color from 0% to 51%.
• And the gradient of the next color from 50% to 100%.

In this way they overlap and create a cut color effect.

.background-overlap {
  background: rgb(97, 0, 189);
  background: linear-gradient(0deg, rgba(46, 49, 49, 1) 0%,  rgba(46, 49, 49, 1) 51%, rgba(232, 232, 232, 1) 50%, rgba(232, 232, 232, 1) 100%);
}

.mydiv {
  height: 90vh;
  width: 100%;
}

<div class="background-overlap mydiv"></div>

I hope it helps.