Можно ли сделать резкий градиент на большом элементе?

Я столкнулся с проблемой, используя linear-gradient для особенно большого элемента.

На меньших элементах жесткий край может быть достигнут с помощью следующего:

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

Однако, когда элемент имеет очень большую высоту, край является мягким. На следующем изображении и примере ниже вы можете видеть, что вторая версия имеет мягкий край, когда элемент очень большой и применяется тот же градиент.

Я пробовал много вариаций линейного градиента и не смог добиться жесткого края в большой версии. Есть ли способ применить градиент с жестким краем к большому элементу?

Пример HTML:

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

Редактировать 2

Благодаря @Tarun это связано с браузером. Приведенное выше изображение является скриншотом из Chromium 45. Safari и Firefox отображаются правильно.

Редактировать 3

Существует открытый отчет об ошибке для хрома по этой проблеме.