Is it possible to make a hard-edged gradient on a large element?

Question

I ran into a problem using a linear-gradient on a particularly large element.

On smaller elements, a hard edge can be achieved with the following:

background-image: linear-gradient(180deg, #000, #000 33%, #0f0 0);

However when the element has a very large height, the edge is soft. You can see in the following image and example below, the second version has a soft edge when the element is very large and the same gradient is applied.

I have tried many variations on the linear gradient and have been unable to achieve a hard edge on the large version. Is there a way to apply a gradient with a hard edge on a large element?

HTML example:

div {
  height: 5000px;
  background-repeat: no-repeat;
  margin-bottom: 1em;
  background-image: linear-gradient(180deg, #000, #000 20px, #0f0 0);
}
div:first-child {
  height: 100px;
}

<div></div>
<div></div>

Edit

The goal of this gradient is for use with another background image, so I prefer techniques that are compatible with the following (don't cover the image):

div {
  height: 5000px;
  background-repeat: no-repeat;
  margin-bottom: 1em;
  background-image: url(http://placehold.it/600x20), linear-gradient(180deg, #000, #000 20px, #0f0 0);
}

<div></div>

Edit 2

Thanks to @Tarun, this appears to be browser related. The above image is a screenshot from Chromium 45. Safari and Firefox appear to render correctly.

Edit 3

There is an open bug report for chromium about this issue.

Answer 1

I've found an alternative using gradients to achieve the same effect, however I think it should be possible to achieve this with 1 gradient, so I consider this a work-around.

The trick is to use multiple backgrounds with 2 gradients that don't change color. Then just define background-size to achieve the hard edge effect. See the working snippet:

div {
  height: 5000px;
  background-repeat: no-repeat;
  margin-bottom: 1em;
  background-image: linear-gradient(#000, #000), linear-gradient(#0f0, #0f0);
  background-size: 100% 20px, 100%;
}
div:first-child {
  height: 100px;
}

<div></div>
<div></div>

Answer 2

You need to repeat each color, and each percent rate of linear-gradient in a tricky, but expressive way. Let's see it in a six colors sample to understand the principle. This approach works for any size of block.

div {
  height: 100px;
  background-repeat: no-repeat;
  margin-bottom: 1em;
  background-image:
      linear-gradient(90deg,
                       red,
                       red     17%,
                       orange  17%, 
                       orange  34%, 
                       yellow  34%,
                       yellow  51%,
                       black   51%,
                       black   68%,
                       green   68%,
                       green   85%,
                       blue    85%);
}
  

<div></div>