Tooltips scroll the page with contenteditable on Chrome

[Wruczek]

Describe the bug

Tooltip arrow shifts content when mouse cursor is positioned inside a contenteditable element.

Reproduction:

1. Visit this link with Chrome or Edge
2. Scroll down and place your cursor inside of the contenteditable element
3. Hover over the tooltip
4. Page will scroll up
5. Remove Tooltip.Arrow - issue will be fixed

Notes:

• Seems to happen on Chromium-based browsers only (I've reproduced it on Chrome and Edge, but not on Firefox)
• This does not happen when the page is fully scrolled up or down (hence the extra scroll on demo page).

Reproduction

https://svelte.dev/repl/b82eb615004d42f6ae4f24c273ad0341?version=4.2.12

Logs

No response

System Info

Chrome 122 on Windows

Severity

annoyance

[huntabyte]

Can you provide a video showing the behavior? I'm not able to reproduce using a Chromium-based browser.

[Wruczek]

It's also fixed for me - seems that the 0.19.6 update fixed this bug. But I've managed to find a similar issue with contenteditable + tooltips:

1. Visit this link with Chrome or Edge
2. Scroll down and place your cursor inside of the contenteditable element
3. Hover over the tooltip
4. Page will scroll once

Removing either animation (animate-fade-up or transition={flyAndScale}) fixes the issue. I've tested this issue on Chrome and Edge (reproduced) - Firefox works as expected, again.

Here is a video:

https://github.com/huntabyte/bits-ui/assets/7156344/a68c65f0-6ac7-4f04-bc90-e349bf7563ab

[huntabyte]

Is this still reproducable with bits-ui@next ?

[Wruczek]

I've tried it using this demo and it seems to be working as intended on bits-ui 1.0.0-next.7

[huntabyte]

Awesome! Thank you!

Closing as fixed in bits-ui@next