移动版Safari -webkit-gradient 在iOS5/6上的不一致性

Question

我注意到在iOS5和iOS6上的移动Safari处理-webkit-radial-gradient的方式存在不一致性，我想在一个Web应用程序中进行纠正。

以以下示例为例：

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>

可查看/可编辑：http://jsfiddle.net/kJ8z3/3/ 移动设备：http://fiddle.jshell.net/kJ8z3/3/show/

由于某种原因，在iOS6上渐变色更加“强烈”。

• iOS6截图（iPad 2，WebKit 536.26）
• iOS5截图（iPad 1，WebKit 534.46）

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

两个设备都报告32位颜色深度（screen.colorDepth），但是来自iOS5的渐变似乎显示出条纹的伪影，表明其颜色深度较低。Google Chrome报告32位深度，但具有比桌面版Safari更多的条纹，后者仅报告24位颜色深度。

有什么想法吗？或者更重要的是，从实用的角度来看，我如何协调两者之间的差异？我希望获得一个完全相同的径向渐变，带有从白色到透明的alpha透明度渐变。

- RHamilton

---

有趣的是，我在使用iOS 6（Build 10A403）的iOS模拟器中尝试了这个，并且结果与iOS 5相匹配。 WebKit版本相同为536.26。 http://i.imgur.com/g8KKC.png - zim2411

Answer 1

在我看来，它在各个方面都“有效”。只是在操作系统、设备等之间的兼容性问题。为了帮助解决Photoshop中的条纹问题，在渐变中添加第三种颜色，有时甚至第五种颜色，可以显著改善视觉效果。这样可以减少程序需要计算的颜色过渡数量（它确实需要计算所有这些...）。

无论如何，我已经向您的渐变中添加了第三种颜色，并且它使事情更加紧密。 http://fiddle.jshell.net/8U46E/

如果您不是Photoshop专业人员，此网站可能会对您有所帮助：http://www.colorzilla.com/gradient-editor/

- Dawson