Scroll incorrectly blocked when in an Iframe on iOS

[petersg83]

What package within Headless UI are you using? @headlessui/react

What version of that package are you using? 2.1.9

What browser are you using? Safari on iOS

Reproduction URL https://github.com/petersg83/headlessui-reproduction-scroll-issue

Describe your issue

The scroll is incorrectly blocked on the ListOptions popover when in an iframe on iOS.

In my reproduction project, there are 2 selects buttons. Only the second one is in an iFrame.

Here you can see the behaviour difference with a list of 60 items:

60.people.mp4

Worth noticing that if the list is big enough to be bigger than the iFrame height, then we can scroll a bit (but not all the way to the end). Here is the same test but with 100 items instead of 60:

100.people.mp4

[petersg83]

I found a workaround.

On iOS devices I put modal={false} on the ListboxOptions. I used the library ua-parser-js to detect iOS devices.

The expected behavior would be to be able to scroll inside the ListboxOptions and the workaround behavior allows to scroll on the whole page which mitigates the issue.