Oh man, I've got a quagmire that is impossible to google!

[jlizarraga]

Hi all,

Okay this is the weirdest IE6 (possibly 7 too? I've only got IE6) bug/feature/WTF I've come across yet.

Apparently, in IE6 when you are are using transparent PNGs (and I'm also using one of the various tools out there to make the transparency bit work in IE6), mouse events "bleed" through the transparent portions of the image. Just like IE erroneously allows you to click "through" the blank parts of a div.

Has anyone ever heard of this, or how to get around/disable it? This is extremely difficult to google because any search that includes "ie6" and "png" just returns solutions to get the transparency to work.

I am 100% positive that this is related to IE's proprietary bits that make alpha blends work, because when I disable IE6 from rendering the transparency this bug goes away completely!

Any help greatly appreciated on this one. Worst case scenario is that the content will gracefully degrade for IE6 users, but that's no fun!

[jlizarraga]

This is all I could find, which leads me to believe this is a "feature" of IE:

http://phpmelb.org/index.php?option=...tid=36&id=4355

[Twey]

'It's not a bug, it's an unexpected feature!'

This does seem very peculiar. Possible workaround: put an opaque background underneath the image. I guess that defeats the point of having the transparent image a little, though.

[jlizarraga]

There is a blank span with a transparent ong background beneath the image, and another blank span with a white background below both of them.

My situation is pretty unique. I had to come up with a way to make a circular button have an animated glow effect (long story!). After the glow starts, the image itself gets a mouseout listener that ends the glowing when triggered (because the image takes up the full size of its containers/the stuff behind it and AFAIK is the only thing guaranteed to fire its mouseout).

Here's the page (please note that this page will change tomorrow):

http://redesign1.autofusion.com/

The bugger in question is the "Savings" button. For the moment the animation is disabled in IE6.

[diltony]

Alternatively, u can try making the image the background of a DIV, so that the image just does not stand as a single element, at least IE should be able to resolve that!!

[jlizarraga]

Well, this happens in IE7 as well, and also affects GIF files as it turns out.

I've just decided to not give IE users the animation.

Too bad most people going to this site will be using IE. :\

If anyone is wondering, I had to take a giant Flash menu and turn it into Javascript while preserving as much of the animation as possible. I would have been able to convince them to ditch their old look and feel if this bug had been apparent from the start, but now I'm way to deep in the project to forget all that.

Boo!

[Twey]

You could keep the Flash and use the animation-free version as a backup...

[djr33]

Why don't you just place the mouseout listener on the background image instead? Or on the div, etc. There must be a way to get something like that to work.

Here's the logic for you:
P = mouse over circle
Q = mouse over glow
If P -> glow = yes
If Q -> glow = yes
If P -> Q
If !Q -> glow = no
If !P -> glow = ?
Thus, all you need to do is account for Q, and that covers P.

Alternatively, you could use P&&Q, and so you check if the mouse is over either P or Q, if it has some issue with layering (so when it's over P, it's not technically over Q).


However, the other easy solution is to just do a normal rollover image, including the circle as part of the glow. That would take more time to load.... but... why not, if you have no other solution?

[vwphillips]

consider using an image map to detect if the click is inside or outside the circle

[jlizarraga]

First of all, huge thanks for all the solutions you guys have offered. Turns out the answer was right in front of my face for the glowing buttons. I had used this transparent layering technique because I thought that simply fading an image of the button with a glow in and out would produce messed up contrast (because you would have a semi-opaque dark image on top of another dark image). It does affect the contrast/brightness, but it is barely as noticeable as I thought it would be. I'm switching the buttons over to this method now.

But as you've probably noticed, there is also a shine affect happening on rollover of the various gauges, which literally cannot be accomplished without transparency (simple gifs in this case). Hopefully I can apply one of the solutions you guys have offered to get those to work in IE as well.

Cheers!