CODEWITHSUNDEEP
selectdrop-down-menusafarifreezeios15
Jonathan Leach
Jonathan Leach

Reputation: 41

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?

Upvotes: 4

Views: 2210

Answers (3)

mangakid
mangakid

Reputation: 89

I ran into this problem recently, and managed to solve it in react by including an empty div element in the form, with the tab index set to 0. This prevented the select input getting the focus first and stopped the bug.

<div tabIndex={0} />

I removed the div when it received the focus to prevent the user from being able to tab to it, as it might be a confusing experience.

Upvotes: 0

Spellcoder
Spellcoder

Reputation: 380

Update: I did an indepth investigation on this select dropdown problem and posted an issue at bugs.webkit.org: https://bugs.webkit.org/show_bug.cgi?id=238318

It's a problem with dropdowns of several components (such as select, input file/date/month) where either the animation to have the dropdown appear or disappear seems to get stuck. You can sometimes see the dropdown being tiny and very transparent (if you zoom into a screenshot) and sometimes you'll be able to select an option even though you don't see the dropdown.

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)

Upvotes: 4

Chris380
Chris380

Reputation: 61

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.

Upvotes: 6

Related Questions