1261645 - MouseEvent.offsetX and offsetY give seemingly incorrect values for transformed element

Status: UNCONFIRMED

(Core :: DOM: Events, defect, P5)

Description

[Bart Nagel]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:45.0) Gecko/20100101 Firefox/45.0
Build ID: 20160304114936

Steps to reproduce:

- Have a container element, positioned relatively.
- Have a child element of the container, positioned absolutely.
- Transform this child element with a matrix3d, to give it perspective and to alter its position
- Set up a click handler which shows via marker elements where on the page was clicked (relative to the container element) and where on the child was clicked (as a child of the child, in its own transformed coordinate space).
- Calculate the latter via event.offsetX and event.offsetY, and also manually via multiplying the clicked position relative to the container by the inverse of the transformation matrix.
- Compare the positions of the three markers. 

There is a jsfiddle at https://jsfiddle.net/gq1vLaxk/5/

I previously posted this issue (and there is more background written) at http://stackoverflow.com/q/36373114/496046 but I now suspect it to be a bug. There are also screenshots of the fiddle in both Firefox 45 and Chrome at this link.


Actual results:

In Firefox, the position found by event.offsetX and event.offsetY is very, very close to my manually calculated position across the board (different by a couple of pixels at maximum, which could be a precision error or something). Near the origin it closely matches the actual clicked position, but when clicking further away from the origin there in an increasingly large amount of error, in both markers of the translated element.

Screenshot in Firefox 45: http://i.stack.imgur.com/9lQVL.png

In Chrome, the position from event.offsetX and event.offsetY matches the actual clicked position perfectly, while my manually calculated position is incorrect by the same amount as in Firefox.

Screenshot in Chrome: http://i.stack.imgur.com/w4ECi.png


Expected results:

The actual clicked position should match the position given by event.offsetX and event.offsetY. Whether this should match my calculated position depends on whether there is a mistake in my calculation.

If there *is* a mistake in my calculation, it appears that it could be the same mistake Firefox is currently making in its event.offsetX and event.offsetY calculation.

Comment 1

[Andrew Overholt [:overholt]]

Olli, what do you think?

Comment 2

[dmitrijs.balcers]

Is there any progress on this issue?

Comment 3

[Bart Nagel]

The Stackoverflow user geobalas has posted a fix to my code on the SO question I referenced above: http://stackoverflow.com/a/42222865/496046

Quoting: "The multiplication of the matrices (the matrix of the 3d transformation - homogeneous coordinates, and the position of the cursor) produces two more values apart from x and y. The first is z, and the other one is w which is used in order to project the 3d object on a 2d plane.

"If you divide the x and y values of the vector by the w coordinate, you get the correct position/mapping of the cursor on the Cartesian plane."

He goes on to post a tweaked jsfiddle with the fix implemented: https://jsfiddle.net/x3ruc3tL/1/

I strongly suspect the event.offsetX and event.offsetY implementation in Firefox has the same bug. Perhaps it can be fixed in the same way.

Comment 4

[Andrew Overholt [:overholt]]

Wow, sorry for the delay here. If someone wants to verify if the bug helpfully pointed out by Bart in comment 3 is indeed present in Firefox, offsetX is implemented here: https://searchfox.org/mozilla-central/source/dom/events/MouseEvent.cpp#426

Comment 5

[Bart Nagel]

This bug still exists in Firefox 66.