Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

useCSSTransforms is broken in Firefox with SVGs due to Mozilla bug #1748

Open
BBarash opened this issue Jul 6, 2022 · 2 comments · May be fixed by #1749
Open

useCSSTransforms is broken in Firefox with SVGs due to Mozilla bug #1748

BBarash opened this issue Jul 6, 2022 · 2 comments · May be fixed by #1749
Labels
stale The label to apply when a pull request or an issue is stale

Comments

@BBarash
Copy link

BBarash commented Jul 6, 2022

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
BBarash added a commit to BBarash/react-grid-layout that referenced this issue Jul 6, 2022
@BBarash
Disabled useCSSTransforms by default on Firefox due to Mozilla bug wi…
3d58211 
…th SVG and CSS3 transforms. Fixes react-grid-layout#1748.
BBarash added a commit to BBarash/react-grid-layout that referenced this issue Jul 6, 2022
@BBarash
Disabled useCSSTransforms by default on Firefox due to Mozilla bug wi…
8502bc7 
…th SVG and CSS3 transforms. Fixes react-grid-layout#1748.
@BBarash BBarash linked a pull request Jul 6, 2022 that will close this issue
Open
@ConcernedHobbit
Copy link

ConcernedHobbit commented Jul 19, 2022 •
edited

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
Copy link

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

@github-actions github-actions bot added the stale The label to apply when a pull request or an issue is stale label Oct 17, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
stale The label to apply when a pull request or an issue is stale
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Disabled useCSSTransforms by default on Firefox due to Mozilla bug wi… BBarash/react-grid-layout
2 participants
@BBarash @ConcernedHobbit