Chromeを使用したCSSバックグラウンド勾配バグ？

Question

html { 
 
    background:#ffffff; 
 
} 
 
body { 
 
    height:250px; 
 
    background: linear-gradient(
 
    to bottom, 
 
    #ffffff 0px, 
 
    #ffffff 100px, 
 
    #0065A2 100px, 
 
    #0065A2 145px, 
 
    #074A8B 145px, 
 
    #074A8B 163px, 
 
    #0065A2 163px, 
 
    #0065A2 203px, 
 
    transparent 203px 
 
); 
 
}

私は、バックグラウンドの直線勾配を使用しようとしていますし、大きな驚きと、それはFirefoxとIE上ではなく、GoogleのChromeで良い作品。

コードは、例えばここにある：https://jsfiddle.net/be1rgpez/1/

background: linear-gradient(
    to bottom, 
    #ffffff 0px, 
    #ffffff 100px, 
    #0065A2 100px, 
    #0065A2 145px, 
    #074A8B 145px, 
    #074A8B 163px, 
    #0065A2 163px, 
    #0065A2 203px, 
    transparent 203px 
); 

私は（画像左のボックスを参照）、それは色の間に奇妙な影をレンダリングするいくつかのカラーストップを持つ線形グラデーションを必要とするが、Google Chromeを使用して。私が必要とする効果は、影なしに「縞模様」です。

添付ファイルにChromeを使用して表示されているものを示します。 左のボックスは、私が必要とするものですが、影なしに（右のボックスのように）です。同じjsfiddleがFirefoxとIEで正しく表示されます。

UPDATE：これはズーム絵です。ご覧のように、左のボックスには、白と青の色の間（そして他の色の間）に小さな影があります。

Answer 1

あなたは色違いのために、同じ出発点を2回定義されています。

.left { 
    background: linear-gradient(
     to bottom, 
     #ffffff 0px, 
     #0065A2 100px, 
     #074A8B 145px, 
     #0065A2 163px, 
     transparent 203px 
    ); 
} 

Answer 2

このコードしてみてください：重複せずに以下のコードは正常に見える

.left { 
    background: linear-gradient(to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px); 
    background: -webkit-linear-gradient(to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px); 
} 

.right { 
    background: linear-gradient(to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px); 
    background: -webkit-linear-gradient(to bottom, #ffffff 0px, #ffffff 100px, #0065A2 100px); 
}