CSS-Gradient funktioniert nicht unter iOS

Question

Ich habe einen gradient background mit einem CSS-Generator erstellt. Dies funktioniert perfekt in allen gängigen Browsern und auf Android. In iOS bekomme ich jedoch this.

Was muss ich zu diesem Farbverlauf hinzufügen, damit es unter iOS funktioniert?

Bearbeiten: Da diese Frage nicht genug Aufmerksamkeit bekommt, möchte ich eine andere Frage stellen: Was brauche ich für CSS-Tag, um einen linearen Farbverlauf für Safari/IOS zu erstellen, wenn, wie in diesem Fall, -webkit-linear-gradient funktioniert nicht? Gibt es andere CSS-Gradienten-Tags, speziell für Safari?

Hier ist der Code für meinen Hintergrund:

.gradient { 
/* Legacy browsers */ 
background: #FF7701 url("gradient-bg.png") repeat-x top; 
-o-background-size: 100% 100%; 
-moz-background-size: 100% 100%; 
-webkit-background-size: 100% 100%; 
background-size: 100% 100%; 
/* Internet Explorer */ 
*background: #FF7701; 
background: #FF7701\0/; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-bg.png", sizingMethod="scale"); 
} 
@media all and (min-width: 0px) { 
    .gradient { 
     /* Opera */ 
     background: #FF7701 url("gradient-bg.svg"); 
     /* Recent browsers */ 
     background-image: -webkit-gradient(
      linear, 
      left top, left bottom, 
      from(#FFAD26), 
      to(#FF7701), 
    color-stop(0.5, #FEA026), 
    color-stop(0.5, #FFFFFF), 
    color-stop(0.5, #FFFFFF), 
    color-stop(0.5, #FFFFFF), 
    color-stop(0.5, #FF8B00) 
     ); 
     background-image: -webkit-linear-gradient(
      top, 
      #FFAD26, 
      #FEA026 50%, 
    #FFFFFF 50%, 
    #FFFFFF 50%, 
    #FFFFFF 50%, 
    #FF8B00 50%, 
    #FF7701 
     ); 
     background-image: -moz-linear-gradient(
      top, 
      #FFAD26, 
      #FEA026 50%, 
    #FFFFFF 50%, 
    #FFFFFF 50%, 
    #FFFFFF 50%, 
    #FF8B00 50%, 
    #FF7701 
     ); 
     background-image: -o-linear-gradient(
      top, 
      #FFAD26, 
      #FEA026 50%, 
    #FFFFFF 50%, 
    #FFFFFF 50%, 
    #FFFFFF 50%, 
    #FF8B00 50%, 
    #FF7701 
     ); 
     background-image: linear-gradient(
      top, 
      #FFAD26, 
      #FEA026 50%, 
    #FFFFFF 50%, 
    #FFFFFF 50%, 
    #FFFFFF 50%, 
    #FF8B00 50%, 
    #FF7701 
     ); 
    } 
} 

Answer 1

dies in iOS eine Überprüfung geben, aber es sollte funktionieren:

background: #ffad26; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffad26 0%, #fea026 50%, #ff8b00 51%, #ff7701 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffad26), color-stop(50%,#fea026), color-stop(51%,#ff8b00), color-stop(100%,#ff7701)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffad26', endColorstr='#ff7701',GradientType=0); /* IE6-9 */ 

ich auch in einen Pre-Prozessor suchen würde empfehlen, wie SASS, die viele dieser Dinge für Sie generieren wird.

Alternative 1

Als Alternative können Sie versuchen, ein Insetbox Schatten verwenden. Es ist nicht genau, und es hat seine Grenzen es ist, aber es ist nur eine Option :)

background-color:#FF8B00; 
-webkit-box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5); 
box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5); 

Alternative 2

Wenn Sie die Höhe wissen, entweder die Box Schatten oben oder einfach nur ein Hintergrundbild verwenden. Auf diese Weise werden Sie Cross-Browser-Unterstützung ohne die Verwirrung zu bekommen, die über hundert Präfix CSS-Eigenschaften wie ist :)

Answer 2

Arbeits DEMO hier http://jsfiddle.net/yeyene/akRHX/

Und sein iPhone-Screenshot ...

fügen Sie Ihre css-Klasse dem Element hinzu.

HTML

<div data-role="page"> 

    <div data-role="header"> 
     <h1>Page Title</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 

     <div class="ui-grid-a"> 
      <div class="ui-block-a"><div class="ui-bar gradient" style="height:200px">Block A</div></div> 
      <div class="ui-block-b"><div class="ui-bar gradient" style="height:200px">Block B</div> 
     </div> 

</div><!-- /grid-a --> 

    </div><!-- /content --> 


</div><!-- /page --> 

CSS

.gradient { 
    /* Legacy browsers */ 
    background: #FF7701 url("gradient-bg.png") repeat-x top; 
    -o-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%; 
    /* Internet Explorer */ 
    *background: #FF7701; 
    background: #FF7701\0/; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-bg.png", sizingMethod="scale"); 
    } 
    @media all and (min-width: 0px) { 
     .gradient { 
      /* Opera */ 
      background: #FF7701 url("gradient-bg.svg"); 
      /* Recent browsers */ 
      background-image: -webkit-gradient(
       linear, 
       left top, left bottom, 
       from(#FFAD26), 
       to(#FF7701), 
     color-stop(0.5, #FEA026), 
     color-stop(0.5, #FFFFFF), 
     color-stop(0.5, #FFFFFF), 
     color-stop(0.5, #FFFFFF), 
     color-stop(0.5, #FF8B00) 
      ); 
      background-image: -webkit-linear-gradient(
       top, 
       #FFAD26, 
       #FEA026 50%, 
     #FFFFFF 50%, 
     #FFFFFF 50%, 
     #FFFFFF 50%, 
     #FF8B00 50%, 
     #FF7701 
      ); 
      background-image: -moz-linear-gradient(
       top, 
       #FFAD26, 
       #FEA026 50%, 
     #FFFFFF 50%, 
     #FFFFFF 50%, 
     #FFFFFF 50%, 
     #FF8B00 50%, 
     #FF7701 
      ); 
      background-image: -o-linear-gradient(
       top, 
       #FFAD26, 
       #FEA026 50%, 
     #FFFFFF 50%, 
     #FFFFFF 50%, 
     #FFFFFF 50%, 
     #FF8B00 50%, 
     #FF7701 
      ); 
      background-image: linear-gradient(
       top, 
       #FFAD26, 
       #FEA026 50%, 
     #FFFFFF 50%, 
     #FFFFFF 50%, 
     #FFFFFF 50%, 
     #FF8B00 50%, 
     #FF7701 
      ); 
     } 
    } 

Answer 3

In der mobilen Safari zumindest, können Sie nicht das Schlüsselwort verwenden transparent, haben Sie rgba(255,255,255,0) stattdessen zu verwenden. Beweis: https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradient.html

Suche nach transparent, Sie werden sogar in ihrem offiziellen Dokument sehen, sie verwenden rgba für transparente Farbe.