Verschwommen linearen Gradienten stoppt in Chrom

Question

Wenn ich einen linearen Gradienten mit mehreren Zwischenstationen wie diese bin mit:

div 
{ 
    border: 1px solid black; 
    width: 100px; 
    height: 2000px; 
    display: inline-block; 
    background-image: linear-gradient(to bottom, #383937 0, #001500 35px, 
    #ffffff 35px, #b0b0b0 150px, #ffffff 150px, #ffffff 100%); 
} 

Firefox Problem frei.

Chrom Die Übergänge zwischen Farbverläufen sind verschwommen. Ich verwende wieder eine Position, um eine neue Farbe zu definieren, also auf Position 35 geht die Farbe sofort von # 001500 nach #ffffff (oder sollte es zumindest sein). Die Verschwommenheit zwischen den Farbverlaufsstopps erhöht sich, wenn das div größer ist.

IE Es gibt einige verschwommene Stellen wie in Chrom, aber weniger extrem. Wie bei Chrome erhöht sich die Unschärfe, wenn das div höher gesetzt wird.

http://jsfiddle.net/cyq7grdr/5/

Der Gradient in den folgenden:

Der Gradient in Chrom:

Der Gradient in Chrom, wenn die div weniger groß ist (1000px anstelle von 2000px):

bearbeiten

Es scheint, wie dies in Chrom festgelegt ist, aber in Firefox eingeführt. Wenn das jemand bestätigen kann, würde ich mich freuen.

Answer 1

kein Fix für das Problem, nur eine Abhilfe ... Sie mehrere Steigungen wie mehrere Hintergründe einer kleinen genug Größe, um nicht zu lösen das Problem (< ~ 300px scheint, es zu tun) verwenden können. Kombinieren Sie mit background-size und background-position und Sie bekommen etwas, das hässlich ist, aber funktioniert:

background-image: 
    linear-gradient(to bottom, #383937 0, #001500 35px, #ffffff 35px, #b0b0b0 150px), 
    linear-gradient(to bottom, #963 0, #abc 150px); 
background-size: 
    100px 150px, 
    100px 150px; 
background-position: 
    0 0, 
    0 150px; 
background-repeat: no-repeat; 

Siehe JSFiddle für Demo.