我注意到在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> </div>
可查看/可编辑:http://jsfiddle.net/kJ8z3/3/ 移动设备:http://fiddle.jshell.net/kJ8z3/3/show/
由于某种原因,在iOS6上渐变色更加“强烈”。
桌面上更新版本的Google Chrome(WebKit 537.4)或Safari(Webkit 534.57.2)产生了一个更类似于iOS5的渐变,因此它可能不是直接的WebKit问题。
两个设备都报告32位颜色深度(screen.colorDepth),但是来自iOS5的渐变似乎显示出条纹的伪影,表明其颜色深度较低。Google Chrome报告32位深度,但具有比桌面版Safari更多的条纹,后者仅报告24位颜色深度。
有什么想法吗?或者更重要的是,从实用的角度来看,我如何协调两者之间的差异?我希望获得一个完全相同的径向渐变,带有从白色到透明的alpha透明度渐变。