Google maps and event transparency

If you use Google Maps with Opera 9 betas you have probably noticed that the top left navigation does virtually nothing. Only the slider works at the moment.

Technically, they use an empty element that is styled to cover the graphic to catch mouse events and call the navigation actions. (Don't ask me why it is coded like that, and why for example the graphic isn't the background of the DIV so that this problem doesn't arise).

This not working in Opera is caused by our experimental support for event transparency.

At first sight I thought I had missed something in IE's implementation that would make Google Maps work. However, none of my tests could identify the missing piece of that puzzle – and it turns out what they actually do is to set a background colour on the empty element and then make it invisible again by setting an opacity filter!

Now, there is no natural link between event transparency and opacity. If a UA implements the former but not the latter, our Google Mappers would have to look for another workaround. It is pure luck that Opera happens to add support for both at the same time, so Google will fix this by using the IE workaround for Opera too.

This issue shows how important it is to standardise a way to say an event should fire on invisible elements. I think addEventListener should be extended with a fourth argument that controls this.

As an aside, to avoid browser sniffing you can use this code to detect support for CSS3 opacity in UAs that support the DOM standard's getComputedStyle:

var el=document.createElement('div');'.5';
var opacitySupported=(getComputedStyle( el, 'opacity').opacity)?true:false;

4 thoughts on “Google maps and event transparency

  1. > I think addEventListener should be extended with a fourth> argument that controls this.I think it's overkill. Just one of the two possibilities should be standardized, and that's enough. Why complicate addEventListener more?

  2. > Why complicate addEventListener more?Because there is quite some content out there that requires empty elements to be transparent to events, the way IE does – yet we have apps like Google Maps that depend on the opposite behaviour. Legacy versus future? I don't think the problem will go away just like that. :-p

  3. (Actually I think this issue is simpler for authors to understand than "event capture" which is probably misunderstood in more than half of the scripts using addEventListener)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s