CSS-Hintergrund linearer Farbverlauf Bug mit Chrome?

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 
 
); 
 
}

Ich versuche, einen Hintergrund linearen Gradienten zu verwenden und mit großer Überraschung funktioniert es gut auf Firefox und IE, aber nicht auf Google Chrome.

Der Code ist hier zum Beispiel: 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 
); 

ich mit mehreren Farbstopps einen linearen Gradienten benötigen, aber unter Verwendung von Google Chrome es macht einen seltsamen Schatten zwischen den Farben (siehe Bild links Kasten). Der Effekt, den ich brauche, ist "gestreift" ohne Schatten.

Im Anhang zeige ich, was ich mit Chrome sehe. Die linke Box ist was ich brauche aber ohne die Schatten (wie in der rechten Box). Die gleiche jsfiddle rendert korrekt in Firefox und IE.

UPDATE: Dies ist eine vergrößerte Ansicht. Wie Sie sehen können, hat die linke Box einen kleinen Schatten zwischen der weißen und der blauen Farbe (und auch zwischen anderen Farben).

Answer 1

Sie haben die gleichen Ausgangspunkte zweimal für verschiedene Farben definiert. Der Code unten, ohne dass die Duplikate sieht gut aus:

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

Answer 2

diesen Code versuchen:

.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); 
}