IE gradient filter doesn't respond to click event

Question

I want to have a transparent background-color and I use gradient filter as a fallback of RGBA in IE. The code is like this:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bfffffff,endColorstr=#bfffffff);

I also want to trigger an event when the user clicks the background, but it seems like the click event doesn't get triggered after I set the filter. Everything is ok without the filter.

So is it another IE bug? How can I solve the problem?

Answer 1

This is probably related to the IE bug that makes links with transparent background no longer clickable: I came across it today. I had a link with a transparent background and display set to block: the main area of the link wasn't clickable, but a 10px border I set on it was. It seems IE also has problems with filters.

This kind of bug is discussed here and here. The first guy's solution is to give a fake background image to the element before setting the filter. The second guy's is to give the element a background colour and set the opacity to 1%, which will make it practically invisible in IE. Hopefully you'll be able to get round it using one of these.

Answer 2

This is not the deal. Internet explorer creates the filters on a separate layer which is placed above your element and since the new graphic layer is not part of the element - which you have the click event on - there will be no event bubbling.

Recently I made a label element with a nice gradient filter for IE. Only the text can be clicked. If I analyze the label layers from the side with and without the gradient layer, then you will understand the problem.

without gradient filter:

------------------
 text layer
------------------
 background layer
------------------


with gradient filter:

------------------
 text layer
------------------
 gradient layer
------------------
 background layer
------------------

By the way, that is the reason, why you cannot put a border radius on a gradient filter too. Try it. Create an element, and style it with border radius and give it a gradient filter and run it in IE 9. No matter how you try to force the gradient to stay inside the round borders - with for example overflow:hidden -, it will never obey. Its like a separate element which is positioned absolute and right above your element to cover it up and right under the text.