1416178 - Inaccurate mouseover regions for elements with coordinates in unit interval when SVG child of transformed DIV

Status: NEW

(Core :: SVG, defect, P3)

Description

[post]

Attachment: firefox-svg-mouseover-bug.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:58.0) Gecko/20100101 Firefox/58.0
Build ID: 20171024220325

Steps to reproduce:

When one uses coordinates in the range [0-1] for elements in an SVG that's a child of a transformed DIV, then mouseover regions are not exactly on the element but are offset. 

Here's an example: https://jsfiddle.net/4ztqrgr0/


Actual results:

Made a circle at the centre of an SVG with viewbox '-1 -1 2 2' which is a child of a div with transform scale(50,50). The mouseover region is nowhere near the circle, indeed it's not even circular


Expected results:

mousover events should have been fired only when the cursor is over the circle

Comment 1

[Hsin-Yi Tsai (she/her) [:hsinyi]]

Do you know where in our code we compute the mouseover region and where the code is wrong?

Comment 2

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

EventStateManager dispatches mouseover/out, but is it actually mousemove which is wrong here.
That would be about hit testing in PresShell and layout.
jwatt might know about the displaylist handling there.

Comment 3

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

(the SVG part of displaylist)

Comment 4

[Jonathan Watt [:jwatt]]

On my computer the width of the div resolves to 83200 px wide, which results in an implicit viewBox transform of 41600x in the horizontal direction for the SVG's contents. We have a number of other bugs filed for our broken handling of such large up/down scaling. One of the causes is the layout and display list code acting on nscoord values (integers) instead of floating point values. This severely limits our ability to handle large scaling well, but I don't see us doing the major overhaul needed to change that any time soon.

Comment 5

[post]

there doesn't seem to have been any progress on this since I first posted it. Here's another example:

https://jsfiddle.net/g096wn5o/

In this case there's no transform on the ancestor div and now there are regions inside the dot (bottom and left) which don't cause mouseover event and there regions outside which do (top-right and top-left). Changing the scale of the parent g to 0.005 and the r of the cirle to 10 results in the same problem.