bug: autofocus input causes modal animation be incorrect on ios

[msigwart]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

The same issue as reported in #16136: When setting autofocus on an ion-input element in a modal in ios, the modal content disappears.

Expected behavior:

The modal content does not disappear.

Steps to reproduce:

1. Create an Ionic App
2. Create a Modal with const modal = await this.modalController.create({...
3. Set autofocus on an ion-input element in the modal component

Related code:

modal.component.html:

<ion-header>
  <ion-toolbar>
    <ion-title>Some Modal Component</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <ion-item>
    <ion-label position="floating">Some Input</ion-label>
    <ion-input type="text" autofocus></ion-input>
  </ion-item>
</ion-content>

Other information:

Related issue: #16136

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0
   Ionic Framework               : @ionic/angular 4.4.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v11.9.0
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

[calendee]

I am observing the same problem in Ionic React RC2/RC3 on mobile devices only. If the device is rotated to landscape and then back, the "bad" modal displays properly.

Demo: https://ionic-react-auto-focus-modal-bug.netlify.com

Reproducible Sample: https://github.com/calendee/ionic-react-auto-focus-modal-bug/tree/master

Here's a demo of it - watch to the end - sorry it's really slow to demonstrate the whole problem.

[sagrawal31]

We are also facing this issue. We are using latest version of @ionic/angular, cordova-plugin-ionic-webview and cordova-plugin-ionic-keyboard

[aaadipop]

same here

[cytrics]

I still have the problem. is there a solution now?

System:

Ionic:

Ionic CLI : 6.11.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 5.2.3 @angular-devkit/build-angular : 0.901.11 @angular-devkit/schematics : 9.1.11 @angular/cli : 9.1.11 @ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 2.2.1 @capacitor/core : 2.2.1

Cordova:

Cordova CLI : 10.0.0 Cordova Platforms : ios 5.1.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 7 other plugins)

[liamdebeasi]

Hi everyone,

This issue appears to be due to a bug in WebKit (the engine that powers Safari) where autofocus causes animations to be run incorrectly. I will look into filing an issue with the WebKit team.

As of now, I am not aware of a workaround but I will post here if I find one.

[flavioribeirojr]

Did anyone found a solution or workaround for this?

[liamdebeasi]

No workaround at the moment. I reported this to the WebKit team, and they can reproduce it on their end: https://bugs.webkit.org/show_bug.cgi?id=219506

[jaminm]

Same here, caused the modal to jump up past the top of the screen then back down, removed autofocus and it animates correctly. This only happened on iOS phones, Safari and Chrome.