CSS webkitradial + 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 版本的问题。

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