CSS gradient not working on iOS

Question

I created a gradient background using a CSS generator. This works great in all major browsers and on Android. However, on iOS, I get this one .

What do I need to add to this gradient to make it work on iOS?

Edit:. Since this question does not get enough attention, I would like to ask another question: what do I need for the css tag to create a linear gradient for safari / ios, when, since in this case -webkit-linear-gradient does not work? Are there any other css gradient tags, especially for safari?

Here is the code for my 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

Provide this check in iOS, but it should work:

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

I would also recommend looking at a pre-processor, such as SASS, that will generate a lot of this for you.

Alternative 1

Alternatively, you can try using the insert shadow. It’s not accurate, and it has limitations, but it’s just an 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

If you know the height, use the top frame or just use the background image. So you get cross-browser support without clutter, which is 100 CSS prefix properties like above :)

Answer 2

In a mobile safari, at least you can't use the transparent keyword, you should use rgba(255,255,255,0) . Proof: https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradient.html

Look for transparent, you will see even in your rgba paper, they use rgba for transparent color.

Answer 3

Working DEMO here http://jsfiddle.net/yeyene/akRHX/

And his iPhone screenshot ...

add your css class to the element.

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