Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

linear-gradients not working in mobile web browsers

I am writing a mobile web-app and I was wondering if someone could help me understand and fix these linear-gradients so that they work in both Safari-mobile and the Android-browser.

I believe I am using every vendor-prefix properly and I even provide a fallback background-color, but whenever I view the app on a mobile device, the element whose background the gradients are applied to is transparent. In other words, the background is transparent and the gradients are not showing up on mobile devices. Meaning, even the fall-back colour is not working either.

The even more weird thing is that they (the gradients) show up on the mobile simulators for android and iOS.

Can someone please help me fix these gradients so they work on both desktop and mobile devices and also teach me how to do working fallback background-colors and background-images ?

I would really appreciate any and all help!

Here is what I have so far:

background:#fff;
background:transparent -ms-linear-gradient(top, rgba(255,255,255,.65), rgba(255,255,255,.9));
background:transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=);
background:transparent -o-linear-gradient(90deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.9) 100%);
background:transparent -moz-linear-gradient(90deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.9) 100%);
background:transparent -webkit-gradient(linear, 0%, 0%, 0%, 100%, from(rgba(255,255,255,.65), to(rgba(255,255,255,.9));
background:transparent -webkit-linear-gradient(90deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.9) 100%);
background:transparent linear-gradient(90deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.9) 100%);

Thanks in Advance!

like image 293
IrfanM Avatar asked Jul 11 '12 20:07

IrfanM


2 Answers

This should work for every browser (even mobile ones) just tested it:

#element {
    background: -moz-linear-gradient(black, transparent); /* FF 3.6+ */  
    background: -ms-linear-gradient(black, transparent); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(black, transparent); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(black, transparent); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr=transparent); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr=transparent)"; /* IE8+ */  
    background: linear-gradient(black, transparent); /* the standard */  
    z-index: 1;
}

Check this two good web sites for css on browsers:

  • Site 1
  • Site 2

    (I tested it on iOS 5.1.1 with this demo http://jsfiddle.net/luissanchezm86/4Kwb4/)

Hope it helps!

like image 87
Luis Avatar answered Oct 02 '22 16:10

Luis


In mobile safari at least, you can't use the keyword transparent, you have to use rgba(255,255,255,0) instead. Proof: https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html

Search for transparent, you will see even in their official document, they use rgba for transparent color.

like image 43
Pencilcheck Avatar answered Oct 02 '22 14:10

Pencilcheck