Open Bug 1377841 Opened 3 years ago Updated 3 months ago

Problem with click/hover detection on 3d transformed DIVs

Categories

(Core :: Layout, defect, P3)

54 Branch
defect

Tracking

()

UNCONFIRMED
Webcompat Priority revisit
Tracking Status
firefox57 --- wontfix

People

(Reporter: jochen, Unassigned)

References

Details

(Whiteboard: [webcompat])

Attachments

(1 file)

1.74 KB, text/html
Details
Attached file 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.
Component: Untriaged → Event Handling
Product: Firefox → Core
Olli, this feels more layout-y than DOM-y to me and mccr8 but we'd like your input. Thanks.
Flags: needinfo?(bugs)
Hit testing is very layout-y indeed.
Flags: needinfo?(bugs)
Component: Event Handling → Layout
Priority: -- → P3
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.

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.

Flags: webcompat?
Whiteboard: [webcompat]
Webcompat Priority: --- → ?
Flags: webcompat?
Webcompat Priority: ? → revisit
You need to log in before you can comment on or make changes to this bug.