1428091 - CSS cursor styling (and event targetting?) sometimes broken for SVG with viewBox

Status: UNCONFIRMED

(Core :: SVG, defect, P3)

Description

[onli89]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171112125346

Steps to reproduce:

Created a svg, 1000x1000. Add in some elements, like rectangles, and set cursor: pointer as their style. Change the viewbox with Javascript: `document.querySelector("svg").setAttribute("viewBox", "250 250 1500 1000");`.

See this fiddle for a minimal code example: https://jsfiddle.net/2r85d0hm/

Tested with FF nightly and 57.


Actual results:

When hovering over the rectangle the cursor is in most areas no longer a pointer, only at the upper right. The element otherwise does not seem to register for FF, also onclick handlers do not trigger.


Expected results:

The cursor should stay a pointer over the whole rectangle and events should trigger, exactly like when the viewbox is set to those values in the HTML, not via JS.

Comment 1

[Robert Longson [:longsonr]]

Seems fine on my Mac on Firefox 57.

Comment 2

[onli89]

(In reply to Robert Longson [:longsonr] from comment #1)
> Seems fine on my Mac on Firefox 57.

Thanks for testing that :) I'm under Linux, but I tested with a new profile, FF 57 and nightly, and in all of them I always have only the hover cursor in the upper right corner of the rectangle. Something OS-related?

Comment 3

[onli89]

(Sorry for the double post)

I can confirm that the issue did not exist in my test under Windows 10 and FF 57.

Comment 4

[Robert Longson [:longsonr]]

Did it work in earlier versions of Firefox? If so you could use http://mozilla.github.io/mozregression/ to find a regession range.

Comment 5

[onli89]

Via mozregression I end up with https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=424660fe711678853ec818ca74581724e695f723&tochange=f2e79915832dbd98afafa91751bfad66eab77e13 . This is again under Linux.


To add further: While I'm not available to reproduce this bug under Windows in a minimal fiddle, I see the bug under Windows in production, where I have an SVG canvas with elements in it. There the viewbox changes constantly when users drag the canvas around, which is implemented via a viewbox change. https://jsfiddle.net/5wg63r9p/2/ is not completely minimal, but it reproduces the bug for me also in FF under Windows, while working in other browsers. Just click on the white area, hold the mouse button down, and move the mouse around. Afterwards the cursor is no longer the cursor pointer.

Comment 6

[onli89]

I wanted to add that the bug mozregression claimed to have found as source seems a bit strange to me. https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=cbc3fdb9aab8352102bec5bf58caa3f55fd95b55&tochange=0901f80a81dbc1073f3355016119586524cf81e9 is the pushlog two steps before and contains some patches which are a lot more likely to be the direct cause.

And to be more precise for the new fiddle: "Afterwards the cursor is no longer the cursor pointer." -> "Afterwards the cursor is no longer the cursor pointer when hovering over the rectangle."

Comment 7

[Robert Longson [:longsonr]]

Any ideas Jonathan?

Comment 8

[Jonathan Watt [:jwatt]]

I can reproduce the issue with the fiddle on Linux, but the display list items seem to be in the right place (and devtools element picker is getting the events right). Weird. You'd expect both to break, or neither to break. Probably needs quite a lot more debugging to figure this out.