Geek asks and answers

Linear gradients not working in mobile web browsers

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

I believe that I use every provider prefix correctly, and even provide a background-color, but whenever I view the application on a mobile device, the element whose background is applied by gradients is transparent. In other words, the background is transparent, and gradients are not displayed on mobile devices. So, even the color of the drop does not work.

Even more strange is that they (gradients) appear on mobile simulators for android and iOS.

Can someone please help me correct these gradients so that they work on both desktop and mobile devices, and also teach me how to make working background colors and background images?

I would really appreciate any help!

Here is what I still have:

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

Thank Advance

+5
source share
3 answers

This should work for every browser (even mobile) that 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 out two good websites for css in browsers:

Hope this helps!

+6
source

Is the property transparent necessary?

see http://www.colorzilla.com/gradient-editor/

+1

In a mobile safari, at least you cannot use the keyword transparent, you should use instead 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 official document, they use rgbafor transparent color.

+1
source

More articles:


All Articles