CSS gradient not working on iOS - ios

Question

I have created a gradient background using a CSS generator. This works perfectly in all major browsers and on Android. However in iOS i get this.
What do I need to add to this gradient in order to make it working on iOS?
Edit: Because this question isn't gaining enough attention, I'd like to ask a different question: What do I need for css tag to create a linear gradient for safari/ios, when, as in this case, -webkit-linear-gradient is not working? Are there any other css gradient tags, specifically for safari?
Here's 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

In mobile Safari at least, you can't use the keyword transparent, you have to use rgba(255, 255, 255, 0) instead.
This is described here: https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradient.html
As you can see, even in Apple's own official document, rgba(255, 255, 255, 0) is used instead of transparent.

Answer 2

Do give this a check in iOS but it ought to 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'd also recommend looking into a pre-processor like SASS which will generate a lot of these things for you.
Alternative 1
As an alternative, you could try using an inset box shadow. It's not exact, and it has it's 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, either use the box shadow above or just use a background image. That way you'll get cross-browser support without the mess that is a hundred prefixed CSS properties like above :)

Answer 3

Working DEMO here http://jsfiddle.net/yeyene/akRHX/
And its 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
);
}
}

Answer 4

For me the following worked and this worked for me in desktop browser, android and ios:-
display: list-item;
background-image: linear-gradient(45deg, #2b4bff, #1b681f);
background-clip: text;
color: rgba(255, 255, 255, 0);
I was using display:flex and that did not work and I had to change
to list-item.
Color I was using 'transparent' and now I am using
rgba(255, 255, 255, 0)
Some helpful notes:
The property background-clip: text; only works in Safari when applied directly to the element you want styled. You cannot apply it to a parent element and style all children at once. (This does work in Chrome and Firefox)
enter link description here