Chrome zoom out breaks linear-gradient background

Question

I am using a gradient background to display an alternating background for absolute positioned rows.

When zooming out in Chrome the layout gets messed up. The calculation of the gradient background size seems to be different to the calculation of the top margins.

I have created a JSFiddle to illustrate the problem: http://jsfiddle.net/4y3k2/4/. When zooming out to e.g. 75% an offset appears between the foreground and background. The offset sums up more and more so that the layout looks completely broken for the last rows.

Here is my code:

#container {
    position: absolute;
    height: 2000px;
    width: 100px;
    background: linear-gradient(red 50%, green 50%, green);
    background-size: 40px 40px;
}
.row {
    position: absolute;
}    

<div id="container">
    <div class="row" style="top: 920px;"></div>
</div>

Everything works fine on IE and Firefox.

Answer 1

You can do this without calculating top every single time for each row.

Instead set the parent div to be a block and use predefined height and width for each row while floating them to the left:

#container {
    position: absolute;
    height: 2000px;
    width: 100px;
    background: linear-gradient(red 50%, green 50%, green);
    background-size: 40px 40px;
    display: block;
}

.row {
    float: left;
    width: 100px;
    height: 20px;
}

http://jsfiddle.net/4y3k2/11/