search

adobe / spectrum-web-components

Spectrum Web Components
https://opensource.adobe.com/spectrum-web-components/
Apache License 2.0
1.26k stars 200 forks source link

[Bug]: Tooltip creates weird jumpy issues on Safari #4728

Open rubencarvalho opened 1 month ago

rubencarvalho commented 1 month ago

Code of conduct

Impacted component(s)

tooltip , action-button

Expected behavior

When the tooltip is activated (on hover) there is no side effects on the visual appearance of the button nor its padding.

Actual behavior

On Safari, when the tooltip is activated it creates weird jumpy artifacts on the parent component.

https://github.com/user-attachments/assets/a44f6c22-1387-40ef-8bbb-fc8e34160337

Working fine with other components in Safari: https://studio.webcomponents.dev/edit/D2039UQVOsceh44YyTZO/src/index.ts?p=stories

Can be seen using Safari on https://studio.webcomponents.dev/edit/N9MFKdA7bgMfVFUoU26P/src/index.ts?p=stories and on our own documentation website: https://opensource.adobe.com/spectrum-web-components/components/tooltip/#self-managed-overlays

Screenshots

https://github.com/user-attachments/assets/fed4192c-f591-40c7-abaf-6685109c6754

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

  1. Open Safari
  2. Navigate to https://studio.webcomponents.dev/edit/N9MFKdA7bgMfVFUoU26P/src/index.ts?p=stories
  3. Hover over the buttons
  4. Check jumping effect on the buttons when tooltip is displayed

Sample code or abstract reproduction which illustrates the problem

https://studio.webcomponents.dev/edit/N9MFKdA7bgMfVFUoU26P/src/index.ts?p=stories

Severity

SEV 4

Logs taken while reproducing problem

No response

najikahalsema commented 5 days ago

Related #4803