CODEWITHSUNDEEP
jquerycssinternet-explorerbackgroundclick
HandiworkNYC.com
HandiworkNYC.com

Reputation: 11104

Internet explorer 8 and jQuery: click() for element with transparent background

In IE8 I have a 100% width + height fixed position div, #photo-upload, with a transparent background, which overlays the entire page. I have a click() function for that div, but in IE8 the click does not fire. Setting the background to a solid color solves the problem.

Does anyone have experience with this bug or have a workaround?

        $('#photo-upload').click(function(){
            $('#photo-upload').removeClass('show');
        });

Upvotes: 3

Views: 2220

Answers (5)

CpnCrunch
CpnCrunch

Reputation: 5061

Just set a background colour with zero opacity:

#photo-upload { background-color: rgba(255,255,255,0); }

This works on IE9.

Upvotes: 0

Krunal Modi
Krunal Modi

Reputation: 747

This is the short and sweet way to solve that problem:

element{
    background:rgba(255,255,255,0.01);
}

and Done. :)

Upvotes: 0

Andy
Andy

Reputation: 8908

Figured I'd add the answer from j-man86's comment on the accepted answer in case someone overlooks it at first like I did.

Use a transparent, repeating, 1px square png (or gif, as long as it's fully transparent) as the background image of the overlayed div.

Excellent discovery! Thanks, j-man86!

Upvotes: 2

Ron Dilbert
Ron Dilbert

Reputation: 1

I have only tested this on IE10, but there seems to be a simpler solution with alpha but without filters. Just setting a color with an explicit alpha component of zero seems to do the trick as well:

backgroundColor: rgba(0,0,0,0);

Upvotes: 0

Jasper
Jasper

Reputation: 76003

Add a colored background and set filter: alpha(opacity=0); opacity: 0;

I'd be interested if someone posts exactly why this happens but this is the work-around I've found to work.

Here is a demo: http://jsfiddle.net/uMyXC/

Upvotes: 5

Related Questions