Home/ Questions/Q 8185183
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T01:45:30+00:00

Weird problem this, I’m using a CSS3 gradient to create a faded out overlay

  • 0

Weird problem this, I’m using a CSS3 gradient to create a faded out overlay effect (ala lightbox).

In IE9, I’ve noticed (due to me using filter: progid:DXImageTransform.Microsoft.gradient) that my overlay layer isn’t clickable, and doesn’t stop me clicking and hovering below.

I’ve created a fiddle:
http://jsfiddle.net/tJPF6/

Expected behaviour:
Click on the numbers.
Modal window appears.
CANNOT hover over numbers to get hover effect.
CAN click anywhere on the overlay to close it.

IE9 behaviour:
Click on the numbers.
Modal window appears.
CAN hover over numbers to get hover effect.
CANNOT click anywhere on the overlay to close it.

Has anyone had any experience with this? I could go back to using a PNG, but would prefer to stick with the gradient if possible.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would recommend you stay with the png. The reasons why not to use IE filter functionality for gradient are many:

    • Microsoft is going to deprecate it anyway for css3 features as they will replace every function the filters where ever intended for
    • In my experience, the render engine of ms filters (I used to experiment a little bit with it) in combination with the rest of the page rendering could lead to unexpected results:
      • Elements disappearing
      • Fonts not rendering properly
      • Links not clickable, hover not working (the kind you’re experiencing right now)

    In your case, if you already implemented a solution with png, leave it as it is. It will save you a LOT of headache, time spent debugging without anywhere to start, etc.

    • 0