Linear Hintergrundbild funktioniert nicht richtig auf Safari

Question

Ich habe den folgenden Code:

body{ 
    background:red; 
} 

div{ 
    width:100%; 
    height:100%; 
     background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0))); 
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-image: linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0)); 
    background-repeat: repeat-x; 
} 

und HTML:

<div> 
    test 
</div> 

Wie man hier sehen kann, ist es anders zwischen Chrom und Safari angezeigt:

http://codepen.io/anon/pen/apwoGj

Warum passiert das?

Answer 1

Wie andere gesagt haben Safari ist auf dem PC tot und sollte nicht verwendet werden, abgesehen von der Tatsache, dass es ein sehr alter und toter Browser ist und wenig css3 unterstützt, wird es auch ein Sicherheitsproblem sein, weil es nicht gepflegt wird . Benutzer sollten es aus ihrem System entfernen, da es heutzutage keinen brauchbaren Nutzen mehr hat.

Ungeachtet der oben genannten das Problem mit Ihrem Code ist, dass Safari 5.1 auf dem PC nicht die neue lineare Gradienten-Syntax (weil es nicht um damals war) und Sie müssten die Präfix-Version verwenden.

background-image: -webkit-linear-gradient (unten, #FFFFFF 0%, #DDDDDD 100%); Das obige ist getestet und funktioniert in Safari PC (Ich habe es installiert eine alte Maschine, die ich nicht mehr benutze).

Answer 2

Überprüfen Sie dies, geht von weiß, zu weiß mit Null Transparenz. Scheint auf Chrom und Safari für mich gleich zu funktionieren.

div{ 
    width:100%; 
    height:100%; 
    background: #fff; 
    background: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0)); 
    background: -o-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0)); 
    background: -moz-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0)); 
    background: linear-gradient(to right, rgba(255,255,255,1) , rgba(255,255,255,0)); 
} 

Auch eine Farbe Hintergrund an der Spitze machen nur sofern ein Browser es an die feste Farbe kehrt nicht den Gradienten unterstützen.

Wenn Sie einen soliden Hintergrund haben, brauchen Sie keine Transparenz, verwenden Sie Volltonfarben.

background: -webkit-linear-gradient(left, #fff, red); 
background: -o-linear-gradient(right, #fff, red); 
background: -moz-linear-gradient(right, #fff, red); 
background: linear-gradient(to right, #fff, red); 

dies wird mit einem Gradienten von weiß auf rot tun als der Hintergrund ist rot (zu was auch immer Ihre Hintergrundfarbe ist rot ändern)

Answer 3

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */ 
background: #1e5799; /* Old browsers */ 
background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */ 
background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */ 
background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1); /* IE6-9 */ 

Vielleicht diese Reihenfolge verwenden und Erklärung von Colorzilla gradient generator. Versuchen Sie, wie diese Ursache Vielleicht haben Sie einen Typ irgendwo, den wir nicht sehen können, oder Ihre Bestellung ist nicht die beste.