bug: ios, scroll latching incorrect on pwas

[01cb7913]

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior: Scroll no longer works normally after opening the keyboard on IOS/PWA only

Expected behavior: Scroll should work the same as before opening the keyboard

Steps to reproduce: Open/close keyboard touch header and start scrolling.

Related code:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-input placeholder="test"></ion-input>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar
  }
});
</script>

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.12.4 (C:\Users\Maxime\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/vue 5.5.5

Capacitor:

   Capacitor CLI   : 2.4.6
   @capacitor/core : 2.4.6

Utility:

   cordova-res : not installed
   native-run  : 1.3.0

System:

   NodeJS : v14.8.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.11
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. The problem here is that WebKit is latching on to an element underneath ion-content which is resulting in that element scrolling, but not ion-content. This seems to be specific to home screen apps on iOS, so I will look into reporting this bug to the WebKit team.

edit: Issue filed https://bugs.webkit.org/show_bug.cgi?id=222654

[lincolnthree]

Can confirm this here as well. I believe it's latching to the element itself.

[MichaelMagomedov]

Hello everyone, please tell me, has anyone found a solution to the problem?

[tomsawdayee]

Any updates here? This bug still exists.

[liamdebeasi]

No updates right now.

This is an issue in iOS, not Ionic. As a result, Apple will need to provide a fix for this. See here for any updates: https://bugs.webkit.org/show_bug.cgi?id=222654

[lincolnthree]

@MichaelMagomedov I use BodyScrollLock to prevent overscroll on IonContent: https://github.com/willmcpo/body-scroll-lock

[enaros]

@lincolnthree hey buddy, how did u use that library to avoid this issue? Care to provide an example or some instructions?

[TimGels]

I would like to know as well. This bug in webkit is driving me nuts.

[andersonjohnf]

Adding a simple:

html, body {position: fixed;}

to global.scss seems to reduce the issue. At the very least it removes the awkward bounce effect which is extra confusing for the user. This does not completely fix the problem though, it's still a major issue facing any full-screen PWA usage on iOS.