Il gradiente CSS non funziona su iOS

Question

Ho creato un gradient background utilizzando un generatore CSS. Funziona perfettamente su tutti i principali browser e su Android. Tuttavia in iOS ottengo this.

Cosa devo aggiungere a questo gradiente per farlo funzionare su iOS?

Modifica: Poiché questa domanda non sta ottenendo abbastanza attenzione, vorrei fare una domanda diversa: cosa mi serve per il tag css per creare un gradiente lineare per safari/ios, quando, come in questo caso, -webkit-linear-gradient non funziona? Ci sono altri tag di gradiente css, in particolare per i safari?

Ecco il codice per il mio background:

.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

fare dare a questo un assegno in iOS, ma dovrebbe funzionare:

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 */ 

Consiglio anche alla ricerca in un pre-processore simile SASS che genererà molte di queste cose per te.

Alternativa 1

In alternativa, si potrebbe provare a utilizzare un ombra scatola inserto. Non è esatto, e ha i propri limiti, ma è solo un'opzione :)

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

Alternativa 2

Se si conosce l'altezza, utilizzare l'ombra casella sopra o semplicemente usare un'immagine di sfondo. In questo modo si otterrà il supporto cross-browser senza il caos che è un centinaio di prefissati proprietà CSS come sopra :)

Answer 2

lavoro DEMO qui http://jsfiddle.net/yeyene/akRHX/

E il suo iPhone screenshot ...

aggiungi la tua classe css all'elemento.

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 Safari Mobile, almeno, non è possibile utilizzare la parola chiave transparent, è necessario utilizzare rgba(255,255,255,0) invece. Prova: https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradient.html

Ricerca trasparente, vedrai anche nel loro documento ufficiale, usano rgba per il colore trasparente.