CSS pointer-events='none' and/or XUL mousethrough='always' in web pages for Firefox

Question

Very recently I asked this question on how to pass clicks through an element (e.g. full screen overlaying ). Received some good advice, but I still wondered which browsers supported this natively...

For those skipping the previous link, the overlay is purely cosmetic, must be overlayed and should ignore clicks (all mouse events should pass right through it)...

So far, I've only managed to get this working with WebKit browsers.

Works (Chrome and Safari 4): -
<image src='./images/75/75.overlay.blood.png' width='100%' height='100%' style='z-index: 3; position: absolute; top: 0; left: 0; pointer-events: none;' />

Firefox is known to support pointer-events with SVGs (and with other HTML elements in 3.6); problem is, I can't seem to get this to work with an SVG (e.g. xlink:href="overlay.24bit.8alpha.png").

Another way I hoped this could be achieved was by using XUL in HTML.

I'm hoping to use the attribute mousethrough="always" on the overlay (<image>, etc). Not working as of yet...

Oddly enough, Internet Explorer treats alpha opacity PNGs transparent areas as "click through" which is handy.

Any other good (or simple yet hackky) ways to achieve this in Firefox (3+). Pondered a Flash overlay with wmode="transparent" (fail).

Chilung

Regarding Firefox, it seems the SVG mask effect could do the job (demo: - people.mozilla.org/~roc/mask.xhtml from weblogs.mozillazine.org/roc/archives/2008/06/…) with pages served (well, named) as .xhtml. Can I use PNGs as masks (I'll invert my overlay)? – Chilung

Also it's supported in FF 3.6 which is to be released fairly soon : developer.mozilla.org/en/CSS/pointer-events – Subkingdom

Thanks lithorus. The SVG route seems to be the best/only option I have. Any thoughts? – Chilung

Depends on your target audience, otherwise the SVG way seems to be the only option atm. – Subkingdom

Was there ever a more (cross-browser) definitive answer on this? – Adler

@American Yak: - Maybe not "cross browser", but both WebKit and Gecko support this; Opera also, but only with SVG. Internet Explorer 7+ won't but IE9 may on release. – Chilung

Answer 1

Try this jQuery solution: http://jsbin.com/uhuto

Works in Firefox, Chrome, iPad's Safari, and IE8 at least. The only issue I saw was that the overlay wasn't translucent in IE, but I assume that's something that can be overcome.

Another solution (used by an Ext JS plugin): http://www.vinylfox.com/forwarding-mouse-events-through-layers/ - uses Javascript to reforward the events.

Necessary