Weird IE7 bug
Filed under: reads
Number of comments: 
Number of trackbacks: 
Tagged with: I ran into a really weird IE6 / IE7 bug I had never seen before today. I figured I'd share it with you. It all started with an email I got from a Dark Matter Pro user. It said:
Using IE-7 browser, when I see my latest image (Rays of Hopes) it looks clean. But when I switch to the Light background, I see scratches on the image.
"SCRATCHES?????" I thought...
So I had a look in IE7 and I saw the following phenomena:
He was right! There were indeed 'scratches' visible on the page. I was baffled for a while. First I tried to open the image and save it again in Photoshop. I even tried saving it in PNG format instead of JPG and uploaded the images to a test install. But the problem persisted no matter what I did to this image.
When I had a look with my workmate Ian Pouncey we found what the problem was. For the fade-in effect on Dark Matter Pro I'm using Dav Glass' YUI Effects. It lets the image fade in by looping through CSS transparency from totally transparent to not transparent at all. For modern browsers this is done by going from opacity: 0; to opacity: 1;. For IE it uses filter: alpha(opacity=0); to filter: alpha(opacity=100);. Sounds fine to me! However, it turned out that this filter creates these 'scratches' on certain images. It looks like we're dealing with an 8bit transparent gif / png with some nasty transparent holes in it. However, it's a full colour jpeg / png without any transparency!
When firing up the IE Developer toolbar, we found out that as soon as we took out the final filter: alpha(opacity=100); that was there after the effect had finished, the 'holes' disappeared.
The only workaround I can think of to tackle this problem so far is to set filter: none; in my javascript after the effect has finished. This eliminates the ugly 'scratches' on the page but they're still visible while the fadein is running.
If any of you has a better solution that completely gets rid of this weird problem I'd love to hear about it!
At 17 July '08 - 23:15 Andreas Lanjerud wrote:
At 19 July '08 - 02:40 NICCAI wrote:
At 19 July '08 - 03:53 Marco wrote:
Demo:
http://demo.darkmatter-template.com/inde..
At 19 July '08 - 18:41 NICCAI wrote:
At 20 July '08 - 08:52 Abhijit wrote:
You have created one of the best templates for PP, that is for sure!
At 15 October '08 - 03:43 Jurgen Oldenburg wrote:
Long time no see! :D I ran into this problem to just now with jQuery. My personal lib of choice :)
Unfortunately I haven’t found any solutions to this.
At 19 November '08 - 14:49 Clive wrote: