CSS webkit radial + iPad(Safari Mobile)无法正常工作

问题描述 投票:1回答:3

我此刻很困惑。我有这个渐变

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

它适用于Safari,适用于Safari将用户代理更改为

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

这与iPad中的webkit和浏览器完全相同

但是,当我在ipad上加载它本身不起作用时,他们的论坛说webkit得到了支持...有人可以帮助我使它工作吗?

或者,有人可以帮助我获得与webkit-gradient相同的结果(我无法实现调整大小调整以及径向渐变,也不能实现椭球形式),因为显然有两种支持?

css ipad webkit
3个回答
0
投票

我认为这是iOS目前使用的webkit版本的问题。

Desktop Safari也存在径向渐变至5.1版的问题。

根据我的理解,将桌面Safari的用户代理更改为5.0只会更改报告给浏览器的用户代理字符串,而不是实际使用的渲染引擎。

遗憾的是,在iOS模拟器上运行确认了iOS上目前无法使用径向渐变,这也是我使用运行Android 3.2进行测试的平板电脑的问题。

好消息是我们迫切需要iOS和Android的操作系统更新,所以希望这个问题能够消失。

如果你真的需要从现在到iOS 5和Android 4之间的径向渐变,你将不得不求助于背景图像或SVG。 :(

(如果有人知道一个CSS技巧来解决这个问题,那么我真的很想听听它。)


1
投票

您可以使用较旧的WebKit语法指定渐变,如下所示:

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

遗憾的是,您无法指定点半径的百分比。


-1
投票

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

-webkit-linear-gradient和webkit-radial-gradient属性需要iOS 5.0或更高版本,或桌面上的Safari 5.1或更高版本。如果您需要支持早期版本的iOS或Safari,请参阅“Prior Syntax (-webkit-gradient)”。

© www.soinside.com 2019 - 2024. All rights reserved.