开发者

CSS webkit radial + iPad (Safari Mobile) not working

I'm puzzled at the moment. I got this gradient

background-image: -webkit-radial-gradient(50% 65%, ellipse cover, #f2f2f4, #201935 55%);

It works on Safari, works on Safari changing the User Agent to

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5

which is the exact same webkit and browser as the one in the iPad

But when I load it on the ipad itself is not working, their forums say the webkit got support for it... can someone help me make it work?

or, can someone help me obtain the same result with webkit-gradient (I can't achieve开发者_JS百科 something that adjust to resizing as well as the radial-gradient, nor the ellipsoid form), because apparently there is support for both?


You can specify the gradient using the older WebKit syntax, like this:

background-image: -webkit-gradient(radial, 50% 65%, 0, 50% 65%, 200, color-stop(0, #f2f2f4), color-stop(55%, #201935));

Unfortunately you can't specify percent for the point radius.


I believe that it's an issue with the version of webkit currently used in iOS.

Desktop Safari also had issues with radial gradients up to version 5.1.

Changing the user agent of desktop Safari to 5.0 as I understand it only changes the user agent string reported to browsers not the actual rendering engine used.

Sadly, running against the iOS simulator confirms that radial gradients aren't currently available on iOS and this is also a problem on tablets I've tested using running Android 3.2.

The good news is that we're imminently due OS updates for both iOS and Android so hopefully this problem will just go away.

If you really need radial gradients between now and iOS 5 and Android 4 you'll have to resort to either background images or SVG. :(

(If anyone knows a CSS trick to get round this then I'd really like to hear it too.)


Per https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW1

The -webkit-linear-gradient and webkit-radial-gradient properties require iOS 5.0 or later, or Safari 5.1 or later on the desktop. If you need to support earlier releases of iOS or Safari, see “Prior Syntax (-webkit-gradient).”

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜