HTML select/input not showing in Webapp on iOS 15 and later, if app is on home screen

We are deploying a .net Webapp and running it on iOS and Android devices. On iOS 15 and later, if the app is on the homescreen, then run, put in background and then come back, all inputs like datepicker and selects are not working anymore. So if you click on the select, nothing happens. A restart of the app helps, but if the app is set in background, the same happens again. I've read from others having the same problems, is there anything done against it? Also tried this for iOS 15.4 Beta 4.

At the moment we are asking our customers to use the app in safari and not on the homescreen to prevent the freezing.

One example input and select:

<input data-clear-btn="false" data-db-class="some_db_class" data-db-name"some_db_name" data-db-typ="date" type="date" id="some_id" value="" data-inline="true">

<select data-mini="true" data-inline="true" class="some_class"
  <option value="-1">Auswahl treffen...</option>
  <option value="0">Beispiel</option>
</select>
Post not yet marked as solved Up vote post of KarolinBartlmae Down vote post of KarolinBartlmae
4.1k views
Posted by
KarolinBartlmae
Reply

  • This is driving me nuts, sometimes the input gets stuck on the screen and stays over all pages...

    —
    Cabanossy
Add a Comment

Replies

We were experiencing the same problem. After more than an hour of figuring out why the select and date input didn't work, I found out that it did work correctly in Safari. This bug is still present in iOS 16 beta 2.

Just as Cabanossy mentioned: it indeed seems that the select fields / input fields do load something because there are several 'dark' spots on the screen, even after switching between pages. The date picker also randomly appears at a random place on the page.

We use Vue in a SPA, maybe this is useful debug information for Apple.

Hopefully there will be a solution soon, the customer was really happy that they could add their web application as an app.

Posted by
bram131
Post not yet marked as solved Up vote reply of bram131 Down vote reply of bram131
Add a Comment

I have the same problem in simple Symfony project. It’s just a plain tag, that works incorrectly. Apple, fix it please

Posted by
Jakksoft
Up vote reply of Jakksoft Down vote reply of Jakksoft
Add a Comment

I have also the same problem with my webapp. I dont have a macbook for more detailed debugging. Has anyone checked the control log yet?

Posted by
debug_
Up vote reply of debug_ Down vote reply of debug_
Add a Comment

Is there an update on this case?

Posted by
sclarencer
Up vote reply of sclarencer Down vote reply of sclarencer
Add a Comment

Yea same issue for my web form also, anyone know how to fix this issue?

Posted by
Shallumvohr
Up vote reply of Shallumvohr Down vote reply of Shallumvohr
Add a Comment

@supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */ input, textarea { transform: translateZ(0px) !important; } }

This css helps

Posted by
dilipkk
Up vote reply of dilipkk Down vote reply of dilipkk
Add a Comment

Hi everyone I just solved this problem with adding these are the codes into my css file :

input, input:before, input:after { -webkit-user-select: initial !important; -khtml-user-select: initial !important; -moz-user-select: initial !important; -ms-user-select: initial !important; user-select: initial !important; }

I hope this solve your problem...

Posted by
huseyinkaplan
Up vote reply of huseyinkaplan Down vote reply of huseyinkaplan
Add a Comment