bug: ios 15, safari bottom url bar does not expand when tapping multiple inputs

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

On iOS 15 Safari, after dismissing a keyboard for an input with autocomplete, the view doesn’t get reset properly to the proper height resulting in a big space at the bottom of the app that remains until refresh.

Notice that after dismissing the keyboard from a regular input, the height resets fine. Bug seems to only occur after dismissing a keyboard with autocomplete.

https://user-images.githubusercontent.com/4053234/135306987-94ef4052-8430-42f6-aa7a-167044d52c8d.MP4

Expected Behavior

I expect the app to fill the height of the screen after dismissing the keyboard.

Steps to Reproduce

1. Create an ionic angular app
   • I used ionic start photo-gallery tabs --type=angular --capacitor
2. Replace content of tab.page.html with something like…

<ion-content>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  regular input
  <br /><input />
  <br />
  <br />
  telephone input with autocomplete and type
  <br />
  <input name="phone-number" type="tel" autocomplete="tel"/>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
  <h1>this is content</h1>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <ion-button>footer button</ion-button>
  </ion-toolbar>
</ion-footer>

1. Run application

• I use ng serve --host 0.0.0.0 so I can open it on my iPhone.

1. Open with Safari on iOS 15 (with tab bar on the bottom)

Code Reproduction URL

https://github.com/chrisventura/photo-gallery

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.8.0 (C:\Users\Chris.Ventura\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.8.0
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.2.6
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   capacitor (Capacitor CLI) : 3.2.3
   @capacitor/core           : 3.2.3

System:

   NodeJS : v16.9.1 (C:\Program Files\nodejs\node.exe)
   npm    : 7.24.0
   OS     : Windows 10

Additional Information

No response

[liamdebeasi]

Good news! I just updated to the iOS 15.2 developer beta, and this issue is resolved there. I will follow up here when iOS 15.2 is generally available. Thanks!

[liamdebeasi]

Hi everyone,

iOS 15.2 has been released with this fix in Safari, so I am going to close this out. Thanks for the report!