[Bug]: Tooltip creates weird jumpy issues on Safari

[rubencarvalho]

Code of conduct

• 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.

Screen.Recording.2024-09-05.at.20.49.37.mov

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

Screen.Recording.2024-09-05.at.20.53.41.mov

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]

Related #4803