Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: autofocus input causes modal animation be incorrect on ios

See original GitHub issue

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:

Create an Ionic App
Create a Modal with const modal = await this.modalController.create({...
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 (cordova-lib@8.1.1)
   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

Issue Analytics

State:
Created 4 years ago
Reactions:11
Comments:8 (2 by maintainers)

Top GitHub Comments

1reaction

liamdebeasicommented, Dec 3, 2020

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.

0reactions

jaminmcommented, Sep 16, 2021

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.