spectrum-web-components icon indicating copy to clipboard operation
spectrum-web-components copied to clipboard

[Bug]: Tooltip creates weird jumpy issues on Safari

Open rubencarvalho opened this issue 5 months ago • 1 comments

Code of conduct

  • [X] I agree to follow this project's 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

rubencarvalho avatar Sep 05 '24 19:09 rubencarvalho