IOS native controls invisible/hidden in PWA

We have a PWA (web app) that the user can add to the homescreen to make it look more like an app. Some users have reported a strange issue that only seems to appear on IOS sometimes when the following step has been made.

  1. Open the app from the homescreen
  2. Use the app for a while
  3. Put it into background
  4. Turn off the screen for a while
  5. Turn the screen back on and put the app to foreground again

The bug is that nothing seems to happen when you click on for example a select or date input control. First I thought that there was some overlay in the app that was blocking the ui controls but the elements receive focus when they are click, but not options is shown.

Now it becomes really strange. When I tried to click a little bit under the select input an option was selected. The same thing occured with a time select. If I first clicked on the timeselect input control and then a little bit under, it updated the time.

So, the controls seems to be there but nothing is visible on the screen. I have only been able to reproduce this on my own once but multiple users have been reporting the same thing. The only way to work around the bug is to restart the app.

It seems to be for all native safari controls that shows some kind of modal/popover.

a gif illustrating the issue is available in this stackoverflow question: https://stackoverflow.com/questions/70292301/ios-native-controls-invisible-hidden-in-pwa

Post not yet marked as solved Up vote post of solution129 Down vote post of solution129
1.5k views
  • Same problem here :(

Add a Comment

Replies

I am also experiecing this exact same issue with my PWAs on iOS. The issue started after upgrading to iOS 15 and only seems to affect the PWA experience (i.e., it doesn't occur when accessing the same site via Safari).

Confirming the issue still occurs in the latest version of Safari 15.4.

I've 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.

Still no fix in 16.0…