'Intermittent HTML select freezes on Safari in iOS 15 onwards
We have a single page app written in HTML/Javascript and our customers are experiencing intermittent freezes when using HTML select drop downs on Safari on iPads in all versions of iOS 15, but not on iOS 14 or earlier. Freezes often seem to occur when coming out of sleep mode. Closing Safari and reopening fixes the problem, but its still an inconvenience if input hasn't been saved etc. We have some legacy jQuery Mobile drop downs, but the problem occurs both with those and with plain JS ones.
We've tried restarting machines, checking storage, turning off any Safari extensions, turning off GPU Process Canvas Rendering (which seems to be on by default in iOS 15) and more. It doesn't seem to be specific to particular models as users have a wide range of these.
I know the UI of select elements was changed in iOS 15 - has anyone elese experienced problems with this?
Solution 1:[1]
Yes, I've experienced an issue with HTML selects that might be related to yours:
- create a desktop shortcut to a PWA with a HTML select
- open PWA
- click on select => should open (OK)
- press home button
- activate PWA again
- click on select => does NOT open
Restarting the app fixes the problem until the next reboot.
Checked that on iOS 15.1 to 15.4, error occurs on all systems. Works on iOS 14. I haven't yet found a reported issue.
Solution 2:[2]
I've posted a bugreport through feedbackassistant.apple.com today including a video showing the bug @chris380 mentions (which I think may be related to your issue).
This is the testcase I've used:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<!-- iOS -->
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- hide browser UI -->
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="select test">
<!-- Chrome for Android -->
<meta name="mobile-web-app-capable" content="yes">
</head>
<body>
<select>
<option value="1">Amiga</option>
<option value="2">Apple</option>
<option value="3">Atari</option>
<option value="4">Commodore 64</option>
<option value="5">MSX</option>
</select>
</body>
</html>
This is the info I posted to Apple:
- Have a html file with <meta name="apple-mobile-web-app-capable" content="yes" /> and a select> or use my testcase (https://cms0-sites.webhare.com/pulldown-test/select-app.html)
- 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)
Some interesting points I notices:
- This bug seems to be triggered on devices with a home button. My guess is that this is because using a gesture on the screen to switch apps cause the pulldown to be closed and so prevents the bug from being triggered)
- switching to another web-capable page added to the homescreen and then switching back makes the pulldowns respond again(!)
Other reports:
- 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/699982 (mention of someone reporting it for iOS 15.1)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Chris380 |
| Solution 2 | Spellcoder |