useCSSTransforms is broken in Firefox with SVGs due to Mozilla bug

[BBarash]

Describe the bug

useCSSTransforms is enabled by default in this library but mouse events are incorrectly offset on SVGs inside a React Grid Item on Firefox.

In my use case, I was displaying graphs inside React Grid Items, but no mouse cursor events were firing inside the graphs due to large CSS3 transforms being applied to the parent Grid Item element.

This is due to a bug in Firefox re: "SVG getScreenCTM does not return correct position if parent is transformed". See https://bugzilla.mozilla.org/show_bug.cgi?id=1610093 for more information, and http://jsfiddle.net/edemaine/vLjd1pa7/6/ for a fiddle that demonstrates the erroneous behavior in Firefox vs Chrome.

Your Example Website or App

N/A

Steps to Reproduce the Bug or Issue

See bug description.

Expected behavior

Consistent behavior of useCSSTransforms on Firefox and Chrome.

react-grid-layout library version

^1.3.4

Operating System Version

macOS

Browser

Firefox

Additional context

No response

Screenshots or Videos

No response

[ConcernedHobbit]

Disabling CSS transforms by default on Firefox entirely seems like an overreaction, as they give a nice paint time benefit for non-SVG use-cases. Maybe a console.warn in development environments when rendering SVGs inside a grid item would make this easier to track down? Could also be beneficial to show it on other browsers as well.

CSS transforms could also be disabled just when an SVG is detected inside a grid item in Firefox.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this issue will be closed in 7 days