Specifying hit testing in CSS

To prevent any confusion: the previous message was intended for everybody  
and the reference to techno music was accidental. ;)

------- Original message -------

As probably is known to members of this WG, hit testing for events is not
the same across browsers. This is something we would like to have
standardized. I hope this can be discussed at next week's F2F in Oslo.

The demos at [0] contain a transparent, absolutely positioned box covering
the entire viewport. There is an anchor underneath it, labelled "Click
me". Attempting to click the link gives these results:

* Gecko and WebKit hit the transparent box.
* Trident (IE) and Presto (Opera) hit the link. (However, if you add an
event listeners to the transparent box, Presto will hit it.) IE's behavior
is analyzed at [1].

IE9 hits even transparent <svg> elements, but this is probably a bug. [2]

We would like to see this behavior specified and converging on a specific
behavior. Whether Gecko/WebKit adopt the more sophisticated behavior or IE
and we (Opera) switch to the simpler behavior is not very important to us,
although in general, simpler algorithms are preferred, of course.

---

It may be that reviving the previous work on the 'pointer-events' CSS
property [3,4] is a logical place to specify this. Currently, only WebKit
and Gecko offer experimental (although non-prefixed) support for this
property for CSS layout boxes. (For SVG, of course, we and probably IE9
support it.)

If we do frame the hit testing issue this way, the main factor is the
current behavior when 'pointer-events: auto' (which is the initial value)
or not supported. I've updated Dean Jackson's 2008 proposal [5] with some
notes from the discussion; this updated version can be found at [6].
Rephrasing the above in terms of pointer-events,

* Gecko and WebKit behave as if 'pointer-events: all', and in WebKit's
proposal this is specified as the 'auto' behavior [7]. (They don't support
'painted', only 'none' as an alternative. [8])
* Trident (IE) and Presto behave as if 'pointer-events: painted' (with the
exception of transparent areas of embedded images and the Presto exception
of event listeners).
* Our preference is for 'auto' to mean 'pointer-events: all', the simpler
option. But again, either value is better than nothing.

Of course, there are still a number of issues to be resolved. See Dean
Jackson's list at [5] and David Baron's reply at [9]. One possible issue
is that
referring to document language (SVG) has been strongly discouraged in
the past; however, drafts such as CSSOM do this.

[0]
http://people.opera.com/lstorset/demos/pointer-events/pointer-events-auto.html
[1] http://lists.w3.org/Archives/Public/www-style/2009Feb/0287.html
(Hixie's notes on IE hit testing)
[2]
http://people.opera.com/lstorset/demos/pointer-events/painted/transparent.xhtml
[3] http://wiki.csswg.org/ideas/pointer-events
[4] https://wiki.mozilla.org/SVG:pointer-events
[5] http://lists.w3.org/Archives/Public/www-style/2008Jul/0428.html (Dean
Jackson's proposal)
[6]
http://people.opera.com/lstorset/TR/pointer-events/ED-pointer-events-20100820.html
[7] http://webkit.org/specs/PointerEventsProperty.html
[8] http://lists.w3.org/Archives/Public/www-style/2009Dec/0060.html
(pointer-events in WebKit)
[9] http://lists.w3.org/Archives/Public/www-style/2008Jul/0431.html (David
Baron's reply)

I'll see some of you on Monday!


-- 
Leif Arne Storset
Core Technology Developer, Opera Software
Oslo, Norway

Received on Friday, 20 August 2010 15:08:11 UTC