Gradiente de CSS que no funciona en iOS

He creado un background degradado con un generador de CSS. Esto funciona perfectamente en todos los principales browseres y en Android. Sin embargo, en iOS obtengo esto .

¿Qué debo agregar a este gradiente para que funcione en iOS?

Editar: Debido a que esta pregunta no está ganando suficiente atención, me gustaría hacer una pregunta diferente: ¿Qué necesito para la label css para crear un degradado lineal para safari / ios, cuando, como en este caso, -webkit-linear -gradient no funciona? ¿Hay otras tags de gradiente css, específicamente para safari?

Aquí está el código de mi 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 ); } } 

Dale un cheque a iOS pero debería funcionar:

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

También recomiendo search en un procesador anterior como SASS que generará muchas de estas cosas para usted.

Alternativa 1

Como alternativa, puede intentar usar una sombra de cuadro recuadro. No es exacto, y tiene sus limitaciones, pero es solo una opción 🙂

 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

Si conoce la altura, use la sombra de cuadro arriba o simplemente use una image de background. De esa forma, obtendrás soporte para múltiples browseres sin el desastre, que es un centenar de properties CSS prefijadas como las anteriores 🙂

En safari mobile al less, no puedes usar la palabra key transparent , debes usar rgba(255,255,255,0) lugar. Prueba: https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradient.html

Busque transparentes, verá incluso en su documento oficial, usan rgba para un color transparente.

Working DEMO aquí http://jsfiddle.net/yeyene/akRHX/

Y su captura de pantalla en el iPhone …

introduzca la descripción de la imagen aquí

agregue su class css al 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 ); } }