Chrome瀏覽器縮小中斷線性漸變背景

Question

我正在使用漸變背景爲絕對定位的行顯示交替背景。

在Chrome中縮小時，佈局會變得混亂。 漸變背景大小的計算似乎與上邊距的計算不同。

我創建了一個JSFiddle來說明問題：http://jsfiddle.net/4y3k2/4/。當縮小到例如前景和背景之間出現75％的偏移量。偏移總和越來越多，因此佈局看起來完全被破壞了最後一行。

這裏是我的代碼：

#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> 

一切正常的IE和Firefox。

Answer 1

您可以在不計算每行頂部每個頂部 的情況下執行此操作。

相反設置父DIV是一個塊，並使用預定義的 高度和寬度的每一行，同時它們浮到左：

#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/