1377841 - Problem with click/hover detection on 3d transformed DIVs

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[jochen]

Attachment: cube.html

User Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Build ID: 20170628075643

Steps to reproduce:

Created cube (2 sides open) from 3d transformed DIVs. Added click handlers via JS and :hover specific CSS.


Actual results:

Click handlers did not work and :hover CSS was not applied for substantial parts of the transformed surfaces, particularly in the far corners of the fully visible surfaces (red/green) and beyond the near corners of the partially obstructed surfaces (blue/yellow).


Expected results:

While the engine is already doing a wonderful job on (partial) obstruction, it should also sucessfully evaluate the mouse position as being inside all of the visible part.

Comment 1

[Andrew Overholt [:overholt]]

Olli, this feels more layout-y than DOM-y to me and mccr8 but we'd like your input. Thanks.

Comment 2

[Olli Pettay [:smaug][[e-mail]]]

Hit testing is very layout-y indeed.

Comment 3

[s]

hi, we have same problem.
https://jsfiddle.net/plnttr1003/56vokvyf/

1. Main element with properties
transform: perspective(2000px) rotateX(45deg)

2.Inner element with properties
transform: translateX(258px) translateY(60px) rotateX(-45deg);
transform-origin: 50% 50%;

3.Inner element has :hover CSS


Actual results:
In firefox :hover CSS does not applied for bottom part of inner element.
In chrome and safari applied for all element.

Comment 4

[Thomas Wisniewski [:twisniewski]]

We just had another report for this on https://webcompat.com/issues/30822, though it's unclear if it's actually affecting live sites or just demos.

Comment 5

[Thomas Wisniewski [:twisniewski]]

We've only sen demos of the problem, and not any actual live sites which are affected. As such, removing the webcompat priority and flag for now.