sl-popup in scrollable section in<dialog> gets clipped in safari

[michaelwarren1106]

Describe the bug

This is not an issue with current Shoelace, but a forward-looking issue regarding switching to <dialog> for modals

We use sl-popup for our implementation of tooltips and toggletips. Our implementation is almost exactly the same as sl-tooltip. But for our modal component, we went with a native HTML 5 <dialog> element instead of using sl-dialog so that we could get focus trapping and inert behavior for free. But the #top-layer mucks with tooltips.

Scenario:

Implementing a <dialog> with a scrollable container with overflow-y:auto inside it. Then placing a tooltip in that scrollable container with content such that the tooltip is going to overflow the dialog container.

The weird thing is that the whole tooltip gets drawn and shown for a second and THEN the tooltip gets clipped.

We started running into this, but Shoelace will run into this when the conversion to <dialog> starts and I know you all are looking into the new dialogs and popover top-layer stuff.

To Reproduce

Steps to reproduce the behavior:

1. In Safari (tested 17.5.1 and 17.4.x) to go https://codepen.io/michaelwarren1106/pen/LYoNMNm
2. Click on the show modal button
3. Hover over the tooltip inside the modal
4. Observe the tooltip contents being clipped.

Demo

https://codepen.io/michaelwarren1106/pen/LYoNMNm

Screenshots

Browser / OS

• OS: Mac
• Browser: Safari
• Browser version: 17.4.x, 17.5.1

Additional information

Provide any additional information about the bug here.

[claviska]

Noted. We do plan on adding support for top-layer via the Popover API to tooltips so that will solve it. In the meantime, it looks like our <dialog>-based tooltips at least reposition so they show inside the dialog instead of getting clipped.

[michaelwarren1106]

we have the reposition() after the animation in also, but our tooltips arent dialogs yet. So I wonder if its some math thing in floating-ui that cant calculate the position right because of top-layer?

[claviska]

IIRC the latest version is top-layer aware, and I have numerous components using the Popover API + Floating and it seems to work flawlessly.

[michaelwarren1106]

coolio, we'll update to 2.15.1 and check. I checked the 2.14.x version of the reposition() func and there werent any changes to it as of 2.15.1, so maybe its a floating-ui dependency update we dont have?

[claviska]

Hard to say…it might be implementation-specific.

[michaelwarren1106]

for sure...ours is almost identical to shoelace, but not 100%...ill give it a shot and see!

[michaelwarren1106]

would be awesome if 2.15.1 updates floating-ui and fixes things!