linear-gradients not working in mobile web browsers
Solution 1
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
-
(I tested it on iOS 5.1.1 with this demo http://jsfiddle.net/luissanchezm86/4Kwb4/)
Hope it helps!
Solution 2
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.
Solution 3
is the property transparent necessary?
see: http://www.colorzilla.com/gradient-editor/
IrfanM
Updated on June 11, 2022Comments
-
IrfanM almost 2 years
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 theAndroid-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!
-
IrfanM almost 12 yearsThe only reason I put the transparent keyword is to overwrite the fallback background-color if one of the gradient methods were accepted. I removed the keyword and I still get the same results. A transparency in mobile instead of a gradient.
-
IrfanM almost 12 yearsAll I did was replace the colours with my start-colour and my end-colour and it is not working (I am getting a transparent fill in both desktop and mobile browsers now). I have a feeling this is due to my colours being rgba values. I think I am going to go back to transparent-png images for the background...
-
Luis almost 12 yearsGlad it helped, in the fiddle I just updated I used the transparency you needed.
-
IrfanM almost 12 yearsSanchez oh okay, thank you for the fiddle. That helped explain some how to make a colour to transparent gradient :-)
-
Luis almost 12 years@user1518176 No problem, remember that you can upvote the solution if it helped you, that way we can all help each other, and welcome to stackoverflow!
-
Luis over 10 years@FarzadA sorry for the delay, still not working? what browser are you using?
-
Farzad A over 10 years@Luis The default android browser on Android 2.3.6
-
Kevin about 3 yearsthis still holds true for transparent keyword in iOS 14.4 with firefox and chrome. this fix works +1