Unusable Text Inputs on iOS ≤15.5 After Migrating to Ionic 7 & Angular 16 with Capacitor

Capacitor
1

Hey there! I am looking for some guidance about a weird bug it is currently happening in my app: I updated the core completely from Cordova - Ionic 3 - Angular 5 to Capacitor - Ionic 7 - Angular 16.

Everything seemed to be working pretty well and it is publicly available now, but in some older iPhones (did some research and the problem lasts up to everything that have iOS v15.5 aprox), users can’t properly use inputs. Every text input is unusable (can’t tap or write), best case scenario, users can type one character and that’s it.

Related issue I’ve found, had no solution.

Thanks in advance!

2

There’s not a lot of information to go off here. Do you have a demo of this happening? Additionally, have you been able to reproduce this in a fresh Ionic start application?

3

Hey there, a colleague made this post while we were looking for solutions.

After some debugging, I’ve found that the specific error we are getting in xcode is:

API error: <_UIKBCompatInputView: 0x155eac820; frame = (0 0; 0 0); layer = <CALayer: 0x1c003a6c0>> returned 0 width, assuming UIViewNoIntrinsicMetric

The current versions we have:

        "@angular/animations": "^16.0.0",
        "@angular/common": "^16.0.0",
        "@angular/compiler": "^16.0.0",
        "@angular/core": "^16.0.0",
        "@angular/forms": "^16.0.0",
        "@angular/platform-browser": "^16.0.0",
        "@angular/platform-browser-dynamic": "^16.0.0",
        "@angular/router": "^16.0.0",
        "@capacitor-community/apple-sign-in": "^5.0.0",
        "@capacitor-community/fcm": "^5.0.2",
        "@capacitor-community/firebase-analytics": "^5.0.1",
        "@capacitor-community/native-market": "^5.0.0",
        "@capacitor/android": "^5.5.1",
        "@capacitor/app": "5.0.6",
        "@capacitor/browser": "^5.1.0",
        "@capacitor/core": "5.5.0",
        "@capacitor/dialog": "^5.0.6",
        "@capacitor/filesystem": "^5.1.4",
        "@capacitor/haptics": "5.0.6",
        "@capacitor/ios": "^5.5.1",
        "@capacitor/keyboard": "^5.0.8",
        "@capacitor/push-notifications": "^5.1.0",
        "@capacitor/screen-orientation": "^5.0.6",
        "@capacitor/splash-screen": "^5.0.6",
        "@capacitor/status-bar": "5.0.6",
        "@capacitor/text-zoom": "^5.0.7",
        "@capgo/nativegeocoder": "^1.0.16",
        "@codetrix-studio/capacitor-google-auth": "^3.3.4",
        "@ionic/angular": "^7.0.0",
        "@ionic/storage-angular": "^4.0.0",
        "cordova-sqlite-storage": "^6.1.0",
        "hammerjs": "^2.0.8",
        "ionicons": "^7.0.0",
        "localforage-cordovasqlitedriver": "^1.8.0",
        "ng-click-outside2": "^12.0.0",
        "rxjs": "~7.8.0",
        "swiper": "^11.0.1",
        "tslib": "^2.3.0",
        "zone.js": "~0.13.0"

Xcode version: 15.1
Failing iOS Versions: up to 15.5 simulated with iPhone 8 and physical iPhone 6S with 15.7.2

A related post with similar behavior here.
The small difference is that, in our case, keyboard will never show at any point, or as said in the first post, will appear once, type a single letter, and then hide and never show again.

Thanks in advance.

4

Do you have a minimal reproduction of the issue as you can reproduce it now? The post you linked to is 4 years old, and a lot has changed on iOS/WebKit in that time.

5

Hey there, I did a small recreation of this issue.

Although it has newer versions of the framework and all, it is still not working at all.

For this project I just init a clean ionic tabs project added capacitor ios, pasted this code on tab1:

  <ion-item>
    <ion-input
      type="text"
      name="email"
      label="Mail"
      labelPlacement="floating"
      fill="undefined"
      required
      email></ion-input>
  </ion-item>

and ran it in Xcode, on an iPhone 8 with iOS 15.5

6

What do you think about the latest post from roodakazo?

7

I’m not able to reproduce this issue using the code snippet on an iOS 14.5 device. Can you do more debugging and see if you can reproduce this issue with a regular input element? You could start by removing Ionic-specific APIs such as label or labelPlacement to see if the issue reproduces.

8

yes, using a plain HTML input has the same problem

And this happens on iOS 15.x so far

9

If using an HTML input has the same problem then it is unlikely this is an Ionic bug. You should consider reporting this to the WebKit team. However, if this issue is already fixed in iOS 16+ then the WebKit team likely will not back port a fix specifically to iOS 15. In that case you may want to investigate a workaround you can implement in your application until you can drop support for iOS 15.

10

Try to add the following css styling. It worked for me:

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

1 Like