Css Safari 6渐变颜色混合/插值错误
这幅画应该能解释一切。左边是Safari 6,后面右边是Chrome。不仅是透明红色渐变的下半部分完全错误(这可能是预乘阿尔法过度的情况),上半部分也更暗,看起来像伽马正确性问题 这个问题在山狮上的Safari 6和iOS6 Mobile Safari上都会出现,但在狮子上的Safari 6上不会出现 是否有人找到了获得预期结果的解决方案?我需要我的渐变包含alpha,因为我正在尝试淡入淡出文本 因为在我输入真实代码之前我无法完成编辑,这里是渐变定义:Css Safari 6渐变颜色混合/插值错误,css,graphics,safari,webkit,gradient,Css,Graphics,Safari,Webkit,Gradient,这幅画应该能解释一切。左边是Safari 6,后面右边是Chrome。不仅是透明红色渐变的下半部分完全错误(这可能是预乘阿尔法过度的情况),上半部分也更暗,看起来像伽马正确性问题 这个问题在山狮上的Safari 6和iOS6 Mobile Safari上都会出现,但在狮子上的Safari 6上不会出现 是否有人找到了获得预期结果的解决方案?我需要我的渐变包含alpha,因为我正在尝试淡入淡出文本 因为在我输入真实代码之前我无法完成编辑,这里是渐变定义:背景图像:-webkit线性渐变(顶部,红
背景图像:-webkit线性渐变(顶部,红色,rgba(255128128,0),白色)代码>
我能够在Mac 10.8.1 Safari 6.0(8536.25)和iOS Safari 6.0.1上重现这个问题。我认为应用透明的颜色挡块而不是透明的颜色挡块可以避免这个问题:
.grad-bg {
background-image:
-webkit-linear-gradient(top, #ff0000, #fff);
height: 100%;
}
.masked {
-webkit-mask-image:
-webkit-linear-gradient(top, white, transparent, white);
}
在图像中,顶部显示在白色背景上,底部形状显示在相同颜色的不透明渐变背景上
(许多编辑。)我在safari 6.0.2中用mbp running mountain lion打开了JSFIDLE,得到了与图片中chrome相同的结果。谢谢您的评论@DanielKurz我明天会检查机器上软件的确切版本。但是iOS 6.0上也存在这个问题,这很麻烦。你真的认为这是safari的一个bug吗?因为下半部分应该是从背景色到白色的渐变,对吗?这就是safari所展示的,我认为缺陷的一部分在于处理rgba(x,x,x,0)
与rgba(0,0,0)
相同。他们不一样。。。!即使将中间颜色停止设置为rgba(255128128,0.1)
也会产生错误的结果。颜色按alpha缩放,这是错误的。奇怪的是,我不时看你的问题和JSFIDLE,有时safari会像chrome那样显示,有时会像识别一样显示。我认为为了一致性,你需要使用中间值rgba(0,0,0,0)
。我不这么认为;OP具有rgba(255128128,0)
,并且相同的值在链接中。如果中间的值都是0,渐变中会有更多的灰色。但这就是问题所在,Safari将rgba(255128128,0)
解释为rgba(0,0,0,0)
,为了使Chrome一致,需要使两者使用相同的值。我添加了一个屏幕截图。我还是不明白你的意思。如果Safari错误地解释了rgba(255128128,0)
,那么让Safari正确解释它似乎是个好主意。我想这两种情况都有可能发生,你正在解决Safari的bug,或者通过限制你使用的渐变(将Chrome应用到Safari),或者通过向CSS文件添加冗余信息(解决Safari的bug)。不过,值得注意的是,Safari6.0.2呈现出了Chrome的风格。很有趣。您使用哪个版本生成屏幕截图?老实说,我不认为完全透明的颜色被当作根本没有RGB值来对待是不正确的,这只是一种不同的解释方式——即使它与某些预期相反。显然,如果每个浏览器都做出相同的解释会更好,但除非它在某个地方违反了某些规范,否则不会上升到bug的级别。