My current design involves utilizing a gradient background to create an alternating pattern for rows that are absolutely positioned.
However, I have run into an issue when zooming out in Chrome. The sizing calculations for the gradient background are not aligning properly with the calculations for the top margins, resulting in a distorted layout.
To demonstrate this problem, I have set up a JSFiddle: http://jsfiddle.net/4y3k2/4/. Zooming out to 75% reveals an offset between the foreground and background elements, which progressively worsens as you scroll down the page.
Below is the code snippet I am using:
#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>
This issue only occurs in Chrome, as it works perfectly fine in IE and Firefox.