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;
  b         


        

Answer 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.