CSS webkit radial + iPad（Safari Mobile）无法正常工作

Question

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

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相同的结果（我无法实现调整大小以及径向渐变，也不能实现椭球形式），因为显然有两种支持？

Answer 1

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

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

很遗憾，您无法指定点半径的百分比。

Answer 2

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

桌面Safari还存在径向渐变至5.1版的问题。

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

可悲的是，针对iOS模拟器运行确认了iOS上目前无法使用径向渐变，这也是我使用Android 3.2运行测试的平板电脑的问题。

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

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

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

Answer 3

每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)。”