REGRESSION (iOS 15): iOS PWA dropdowns fail after app is moved to the background

• Component: Forms
• Status: RESOLVED MOVED

[Mark de Jong]

A PWA (web-capable) webpage on iOS 15 can get into a state in which dropdowns (from select and input HTML elements) fail to appear.
This often happens when an element which has a dropdown is focused and the web application is moved to the background (by using the homescreen button or activating the lockscreen). After returning dropdowns won't appear for any of the elements.

In the simulator I've verified these elements with dropdown to be able to trigger the bug:

- <select>
- <input type="file" />
- <input type="date" />
- <input type="month" />

The issue happens in iOS 15.4 (tested in the simulator) and I found mentions online of the issue dating back to the iOS 15 beta.
This leads me to conclude that it's related to the changes in UI for dropdowns in iOS 15.

Some other observations:
- When the bug is triggered ALL components with a dropdown will fail
- If the dropdown is open while going to background it will stay be there when returning, but it won't close
- Repeatedly tapping on a select dropdown that won't close causes it to shrink a little each time (weird, maybe it's the close animation starting but then abruptly stopping)
- It seems if a dropdown won't appear it may be there but invisible. You still be able to sometimes select an option when clicking somewhere on the page where the dropdown would be
- One of these issues linked below noted this error message appearing in the console: "Failed to present a context menu for configuration with identifier"
- Switching to another PWA and back fixes the dropdown issue
- non-dropdown types of overlays (such as used by input type="color") doesn't seem to have the problem

How to reproduce it:
- Have a html file with <meta name="apple-mobile-web-app-capable" content="yes" /> and a select element
- Use an iPhone/iPad/simulator on a device with home button and with any iOS 15 version (tested up till 15.4)
- Visit the html page in Safari and use the share button to add it to the home screen
- Open the app from the home screen
- Activate (tap) a pulldown
- Click on the home button on the bottom of the iPhone or iPad
- Now click on the icon on the home screen again
- What often happens: the options popup isn't closed or no pulldown on the page can open the options popup. If the options popup stays open you'll at first still be able to scroll it but you cannot get it to close.
- If it doesn't happen you can try to restart the device and retry above steps (starting from opening the homescreen app)

Other mentions online about this issue:
- https://developer.apple.com/forums/thread/689901 (issue with ios 15 beta 8)
- https://developer.apple.com/forums/thread/691863 (issue with select reported on the final ios 15)
- https://developer.apple.com/forums/thread/699982m (mention of someone reporting it for iOS 15.1)
- https://stackoverflow.com/questions/70292301/ios-native-controls-invisible-hidden-in-pwa
- https://developer.apple.com/forums/thread/696346
- https://githubhot.com/repo/babybuddy/babybuddy/issues/381
- https://stackoverflow.com/questions/70834688/intermittent-html-select-freezes-on-safari-in-ios-15-onwards/71035270

[Mark de Jong]

Created attachment 455623 [details]
Video of select dropdown not disappearing, then going invisible but selectable

Video shows the simulator with iOS 15.4. When switching away from the PWA and returning the select dropdown stays visible but won't disappear when selecting an item. After switching back to the PWA a second time the dropdown seemingly has disappeared but I think it's still there but invisible (I still manage to select some items). Components with dropdown aren't able to make their dropdown visible anymore when in this state. At 0:25 I use the keyboard to navigate through the options of the focused select element which works.

[Mark de Jong]

Created attachment 455627 [details]
testcase for the iOS PWA dropdown issue

[Mark de Jong]

I now see very faint parts of dropdowns on my testpage in the simulator.
This causes me to believe both the appear and disappear animations of the dropdowns get stuck/cancelled somehow. This also explains why sometimes you can click part of the "invisible" dropdown.

- non-visible dropdown can sometimes be interacted with even though they seem invisible because they are there but they are very small and have a low opacity due to their animations not having finished

- visible dropdowns get smaller each time you tap on them because they start their disappear transition/animation again which quickly stops again

[Mark de Jong]

Created attachment 455629 [details]
Screenshot of testcase in which you can faintly see the dropdowns below each element

[Radar WebKit Bug Importer]

<rdar://problem/90777906>

[Sander]

- This problem also occurres on iOS 15.5 (tested on iPhone SE with a home button).
- This problem also occurs on iPhones that don't have home buttons, like the iPhone 13. But it's very hard to reproduce without a home button. Only happens sometimes.

Really need a fix here.

[Alexandre]

Does anybody have access to IOS 16 beta to check if the issue persists?

can confirm issue still exists on iOS16.

[Alexandre]

which beta?

latest public beta

[Alexis]

Same problem here :(

16.1 still broken :-(

[Mattia Astorino]

This issue happens also with standard <input type="text">.

[BartoszK]

My PWA I have created is also using simple INPUT select and has the same problem. Tested on iPhone14Pro. With iOS 16. On Safari (launching PWA from link created on main screen of the iPhone). Please, lets have a fix.

[Sam Sneddon [:gsnedders]]

I believe this is fixed in iOS 16.2 betas.

[Tomas Treskon]

Just tested on iOS 16.2 and can confirm it is finally fixed.

[Chris]

Just had the bug occur for me on iOS 17.2.1 on an iPhone 12 Mini. Closing down the app and re-opening doesn't fix it, only fix was to power down the phone and power back on,