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.

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

[Bugfix: Text] Fix ballooning SVG dimensions on Firefox #1854

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

tfineberg4
Copy link
Contributor

@tfineberg4 tfineberg4 commented Jun 14, 2024

🐛 Bug Fix

Hey guys! Recently noticed that Text's svg wrapper blows up to max width/height on Firefox. This has the impact of inflating the parent container as well, and generally polluting the DOM inaccurately sized containers.

This is an accepted implementation difference between Firefox and Safari/Chrome for SVGs with 0 width/height. And, Text is still displaying correctly. However, this behavior is a barrier in implementing dynamic layouts, since 1 Text element can mess up significant portions of the DOM with inaccurately sized elements. For example, I noticed this issue manifesting via Axis, where it was bubbling up from the tickLabel's Text components.

Visx is so powerful because it abstracts finicky SVG components - so ideally, I think Text should be browser agnostic and handle this svg "quirk" on its own.

Let me know what you think! Thanks!

Axis on Firefox with this issue:

Screenshot 2024-06-14 at 3 00 50 PM

Axis on Firefox after fix:

Screenshot 2024-06-14 at 3 14 43 PM

Axis on Chrome (before and after)

Screenshot 2024-06-14 at 3 00 06 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant