Open Bug 1377841 Opened 3 years ago Updated 3 months ago

Problem with click/hover detection on 3d transformed DIVs


(Core :: Layout, defect, P3)

54 Branch



Webcompat Priority revisit
Tracking Status
firefox57 --- wontfix


(Reporter: jochen, Unassigned)



(Whiteboard: [webcompat])


(1 file)

1.74 KB, text/html
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.

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, 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.