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

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

但当我在ipad上加载它时，他们的论坛说webkit支持它……有人能帮我把它修好吗？

或者，有人能帮我用webkit-gradient获得同样的结果(我不能实现像调整大小和径向梯度一样调整大小的东西，也不能实现椭球体形式)，因为显然两者都支持？

Answer 1

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

Desktop Safari在5.1版本之前的径向渐变方面也存在问题。

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

可悲的是，在iOS模拟器上运行证实，径向梯度目前在iOS上不可用，这也是我用运行Android3.2测试的平板电脑上的问题。

好消息是，我们即将对iOS和安卓系统进行操作系统更新，所以希望这个问题会消失。

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

(如果有人知道解决这个问题的CSS技巧，那么我也很想听听。)

Answer 2

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

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

不幸的是，您不能为点半径指定百分比。

Answer 3

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

的-webkit-线性梯度和webkit-径向梯度属性需要桌面上的iOS 5.0或更高版本，或者Safari5.1或更高版本。如果您需要支持iOS或Safari的早期版本，请参阅“Prior Syntax (-webkit-gradient)。”