FormidableLabs / FormidableLabs/victory

Safari Tooltip Incorrect Size Scaling in VictoryBar with VictoryTooltip

Open
#2,835 7 comments 4 reactions 0 assignees View on GitHub
Issue: Accepted Type: Bug :bug:
Dominant language
TypeScript
Stars
11.2k
Forks
536
PR merge metrics
No merged PRs in 30d

Description

### Is there an existing issue for this?

- [X] I have searched the existing issues

### Code of Conduct

- [X] I agree to follow this project's Code of Conduct

### Victory version

"victory": "^37.0.0"

### Code Sandbox link

[Codesandbox](https://codesandbox.io/p/devbox/safari-bug-9cyn6k?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cltx3dqkx00073b6gjt7i0dcg%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cltx3dqkx00023b6gazhct2yk%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cltx3dqkx00043b6gxna50ggs%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cltx3dqkx00063b6gh92fzm9m%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cltx3dqkx00023b6gazhct2yk%2522%253A%257B%2522id%2522%253A%2522cltx3dqkx00023b6gazhct2yk%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522cltx3dqkx00063b6gh92fzm9m%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltx3dqkx00053b6gmn30gj41%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cltx3dqkx00063b6gh92fzm9m%2522%252C%2522activeTabId%2522%253A%2522cltx3dqkx00053b6gmn30gj41%2522%257D%252C%2522cltx3dqkx00043b6gxna50ggs%2522%253A%257B%2522id%2522%253A%2522cltx3dqkx00043b6gxna50ggs%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltx3dqkx00033b6ga7pksxzd%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cltx3dqkx00033b6ga7pksxzd%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

### Bug report

Using the `join("\n")` method within the `labels` prop on `VictoryBar` incorrectly scales the displayed tooltip upon hovering, increasing significantly in size, to a much larger degree than expected. To the best of my findings this only seems to happen in Safari, when utilizing the `VictoryBar `component in conjunction with `VictoryTooltip` as its `labelComponent.`

### Steps to reproduce

1. Go to [Codesandbox](https://codesandbox.io/p/devbox/safari-bug-9cyn6k?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cltx3dqkx00073b6gjt7i0dcg%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cltx3dqkx00023b6gazhct2yk%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cltx3dqkx00043b6gxna50ggs%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cltx3dqkx00063b6gh92fzm9m%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cltx3dqkx00023b6gazhct2yk%2522%253A%257B%2522id%2522%253A%2522cltx3dqkx00023b6gazhct2yk%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522cltx3dqkx00063b6gh92fzm9m%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltx3dqkx00053b6gmn30gj41%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cltx3dqkx00063b6gh92fzm9m%2522%252C%2522activeTabId%2522%253A%2522cltx3dqkx00053b6gmn30gj41%2522%257D%252C%2522cltx3dqkx00043b6gxna50ggs%2522%253A%257B%2522id%2522%253A%2522cltx3dqkx00043b6gxna50ggs%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cltx3dqkx00033b6ga7pksxzd%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cltx3dqkx00033b6ga7pksxzd%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D).
2. Click on 'Open a new tab' Copy the url and paste it Safari.
3. Hover over one of the upper piller.
4. See error.

### Expected behavior

The tooltip (VictoryTooltip) should maintain a consistent and appropriate size when hovered, similar to its behavior in other browsers, and should not excessively enlarge regardless of the amount of new lines in the label.

Google chrome:
![Skärmavbild 2024-03-18 kl 16 16 36 (2)](https://github.com/locoapp/admin/assets/113009525/6b50cf9a-adbe-45a9-b309-bfbb941628d7)

### Actual behavior

Upon hover, the size of the tooltip (VictoryTooltip) expands disproportionately, far beyond the expected degree of enlargement. This issue has been noted in Safari, while not manifesting in Google Chrome, the only other browser tested thus far. However, it's important to acknowledge that this behavior may extend to other browsers that have not yet been examined.

Safari:
Skärmavbild 2024-03-18 kl  16 16 44

### Environment

- Device: Desktop
- OS: macOS Version 14.3.1
- Browser: Safari

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.