CSS gradient not working on 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
        );
    }
}

Pepys

Answer 1

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

Ngocnguyen

Hmm, I don't have an ipad myself so a friend is testing for me with both an ipad mini and a ipad 3. On the mini it works, but not on the ipad 3... I have applied your code now, could you test for me if it works for you? Check: rickgommers.nl/geoffrey – Pepys

see my reply above. It doesn't work as it's supposed too. I'd like to reward you with the bounty, but therefore we have to fix this first :) – Pepys

@Pepys Try specifying a height on your element. Try height:100%, for example. If that doesn't work, I'm not sure there is a CSS-only solution other that what I've written above. If that doesn't work, I'd use an image and tile it using background-repeat: repeat-y; – Ngocnguyen

That image worked lol. Crap CSS working different in every browser... Good old image fixed it :) Thx Rob! – Pepys

@Pepys its not fair to blame this on CSS. Each browser dictates how much of css it will support and how well. I am sure you wouldnt blame the W3C for the troubles you used to have on IE. – Dollarbird

Answer 2

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.

Viipuri

Thank you this solves one of the issues I've been having – Energetics

This works (at least on iOS 8) and is the simplest solution, by far. – Divinity

Thank you. This works for me, fading from transparent to a solid color and back again: linear-gradient(to right,rgba(255, 249, 240, 0), rgba(255, 249, 240, 1), rgba(255, 249, 240, 0)). It looks great on all devices now! – Hack

This just helped me too, thanks! It's only gradients that have trouble with the transparent keyword on iOS, or do other properties require rgba too? – Papoose

OP didn't use transparent... Am I missing something? – Lyra

This solved a problem I had at work. You can reproduce the behavior using this codepen if you've got mobile iOS (Tested on iPad 10.3.3) codepen.io/phebert/pen/MGyqeo – Turtledove

This is amazingly annoying behavior. Does Apple provide any reason they don't respect transparent as a color in gradient? Literally no other browser has the same limitation. – Cockerel

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

Voracious

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

1. I was using display:flex and that did not work and I had to change to list-item.
2. 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

Sorb

color rgba(255, 255, 255, 0) instead of transparent fixed the problem for me! – Alannaalano