IE Alpha Filter Bug: #02050a色值像素透明化
IE的透明滤镜bug算的上是IE为数众多bug里的不起眼的角色,直到之前我确实的遇到了它,我想我根本不会去关注非标准的IE滤镜带来的各种问题。这个bug的表现非常的直观,filter透明度渐变后,图片的某些点变成了透明的了!比如如果这个时候背景是白的,就是白色的噪点。这在banner切换时表现的非常明显——渐变是产生噪点,渐变完成后噪点也会一直残留:
这个Bug在IE6 7 8里都存在,实际上只要使用了透明滤镜就会表现出来,并且非常有趣的是,它只对一种颜色值有反应:#02050a
为什么是这个颜色?恐怕只有微软才知道。一开始我只是以为只有一些偏黑色的图片会出现这样的情况,但后来经过一系列测试我才发现原来出现的噪点如此固定以至于所有噪点所在的像素点原来的色值都是#02050a,决然不是巧合。然后,如果google这个"#02050a",就能找到关于它的各种文章了,可以说这个色值就是这个bug的关键字。
原因是IE6 IE7 IE8在对JPG图像应用透明滤镜时,会将特定色值#02050a的像素点转换成完全透明的点。仅限于JPG图像,PNG以及GIF并不存在这个问题。目前,这个经典bug微软并没有什么解释,对于偶然遇到这个问题的解决方案也就无非下面几种:
- 不使用JPG,当然很多时候必须使用。
- 在图像中避免色值#02050a,这又是比较难做到的,因为JPG压缩造成的色值抖动无从控制,而偏偏JPG又是bug的一个成因。要避免使用到这个色值唯一的做法可能是用色阶把图片稍微调亮一些。
- 调整图片的背景到色值#02050a,这样做的目的是透明化的像素直接看到的是背景,多少可以避免一些视觉上的影响
- 停止使用滤镜,这点似乎也不可能,但至少我们可以在渐变结束之后移除滤镜,而不是任其停留在 alpha(opacity=100) 而无所作为。这样做的好处是,可以保证图片在渐变结束之后,不再显示残留的噪点。
obj.style.filter = '';
实际上,黑色图片的使用本来就相对较少,所以可能永远都不会遇到这个问题。但是一旦遇到,#02050a就会像灾星一样跟着你让你觉得很不舒服。
最后,在我的测试过程中还发现了一个有趣的现象:无论是在一开始还是在bug产生之后,使用浏览器的缩放,即Ctrl + 然后 Ctrl -,或者按住Ctrl滚动滚轮,那么这个bug就会自动消失!并且在页面刷新之前都不会再存在!