w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.5k stars 667 forks source link

[css-transforms-2][cssom-view] Define hit testing behavior for 3D transformed elements #3997

Open mikokm opened 5 years ago

mikokm commented 5 years ago

Related to #2325. css-transforms-2: https://drafts.csswg.org/css-transforms-2/ cssom-view: https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint

The expected behavior of doing a hit test on a page with CSS 3D transformed elements is that the top-most element is returned first.

It seems that this is not how Chrome and Safari work. In this testcase, an element is rotated so that it intersects with its preserve-3d parent plane at z=0. The blue area is from the parent element (not link), and the white area is from the transformed child element (link). On Chrome and Safari both of the areas are clickable, on Firefox only the blue area is clickable.

This was found by webcompat. The hit testing behavior of 3D transformed elements should be defined, so that this browser interoperability issue can be fixed.

smfr commented 5 years ago

Can we just define hit-testing order in terms of the z-sorting and intersection behavior? Hit-testing should always match painting.

trusktr commented 3 years ago

I was confused by this in https://bugzilla.mozilla.org/show_bug.cgi?id=1686390 (more test cases there).

trusktr commented 2 years ago

Can we just define hit-testing order in terms of the z-sorting and intersection behavior? Hit-testing should always match painting.

This is spot on.