Weird interactions between dialog and select elements on Safari

[bivens-dev]

What is affected?

Accessibility, Component

Description

When trying to nest a select element inside of a dialog the drop-down doesn’t overflow the dialog as expected on iOS.

Here is an example screenshot showing you what I mean.

Reproduction

https://lit.dev/playground/#gist=6bca317bec6c6ebea62feaefa2ef2525

Workaround

Currently in search of one, presumably trying to make the dialog much larger would be one approach here.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.3.0

Browser/OS/Node environment

Browser: Chrome Operating System: iOS 16.7.5 Material Web Version: 1.3.0

[asyncliz]

This looks like this is the popover issue with dialogs. Can you try adding a menu-positioning="popover" attribute on the select?

[bivens-dev]

Unfortunately that didn’t seem to help. I’ve put together a simple reproduction here in the playground just to confirm it wasn’t anything related to what I mentioned in the original link that could have been interfering.

https://lit.dev/playground/#gist=6bca317bec6c6ebea62feaefa2ef2525

Note: Also confirmed this bug exists in Safari for iOS 16.7.6

[asyncliz]

Gotcha, I think it might be limited to Safari iOS. I wasn't able to reproduce on Safari macOS (and Chrome on iOS is just webkit safari under the hood).

My simulator is giving me trouble so I might not be able to look into this for a bit. Do you know if it happens in iOS 17?

[bivens-dev]

I had a chance to confirm that it behaves as expected in iOS 17.