Css Mobile Safari-webkit gradient iOS5/6不一致

我注意到iOS5和iOS6上的Mobile Safari处理webkit径向梯度的方式不一致，我想在webapp中纠正这一点

以以下为例：

div {
    width:100%;
    height:100%;
    background-color: black;
    background-image: -webkit-radial-gradient(center center, circle cover, rgba(255,255,255,1), rgba(0,0,0,0) 75%);
    position:absolute;
}

适用于

<div>&nbsp;</div>

可查看/可编辑： 对于移动设备：

出于某种原因，iOS6上的梯度“更强”

• （ipad2，webkit536.26）
• （ipad1，webkit534.46）

桌面上的Google Chrome（WebKit 537.4）或Safari（WebKit 534.57.2）的更新版本会产生更类似于iOS5的渐变，因此这可能不是WebKit的直接问题

这两种设备都报告32位颜色深度（screen.colorDepth），但是来自iOS5的渐变似乎显示了带状伪影或较低的颜色深度。Google Chrome报告32位深度，但比桌面Safari（只报告24位颜色深度）有更多的条带

知道发生了什么吗？或者更重要的是，从实践的角度来看，我如何调和两者之间的差异？我想要一个相同渲染的径向渐变，alpha透明度从白色逐渐变为透明。

在我看来，它在所有方面都“有效”。这只是操作系统、设备等之间工作得如何的问题。为了解决Photoshop中的带状问题，在渐变中添加第三种颜色，有时是第五种颜色，对视觉效果有很大帮助。它减少了程序负责的颜色转换的数量（它必须计算所有颜色转换…）

不管怎么说，我给你的渐变加了第三种颜色，它把事情搞得更紧张了。

---

如果你不是Photoshop爱好者，这个网站可能会有所帮助：

有趣的是，我使用iOS 6（Build 10A403）在iOS模拟器中进行了尝试，结果与iOS 5相符。WebKit版本与536.26相同。