Chrome does not update background size gradient properly when resized

Question

While Firefox does it right by updating the linear-gradient background on each frame, chrome seems to display things in “jumps”, which means that after resizing only the mathematically correct layout will be displayed every few pixels.

Demo site (Try resizing the window)

 /* draw 10 horizontal responsive lines in the background */ div{ background-image: linear-gradient(90deg, transparent calc(100% - 2px), #000 100%); background-size: calc(100% / 10); /* 10 rows */ } 

Background size does not update properly in Chrome (GIF):

In Firefox, as always, everything works fine:

---

This is a simplified task. I am trying to create a grid using a sensitive gradient of css background, but in Chrome it is complicated.

I am trying to avoid using a lot of HTML markup to accomplish this, since the grid size is so dynamic.

Does anyone know a trick to help Chrome display the background size correctly while the grid itself resizes?
Thanks.

---

Update - Released as a New Bug