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

Question

Created May ’22

Replies 8

Boosts 2

Views 4.8k

Participants 9

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>

Boost

Answer 1

Cabanossy OP

May ’22

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

0

Answer 2

bram131 OP

Jun ’22

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.

1

Answer 3

Jakksoft OP

Sep ’22

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

0

Answer 4

debug_ OP

Nov ’22

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?

0

Answer 5

sclarencer OP

Nov ’22

Is there an update on this case?

0

Answer 6

Shallumvohr OP

Dec ’22

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

0

Answer 7

dilipkk OP

May ’23

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

This css helps

0

Answer 8

huseyinkaplan OP

Mar ’24

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...

0