bug: Overscroll effect is not shown when ion-content being overscrolled on Android

[tomfong]

Prerequisites

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

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x

Current Behavior

On Android, when it is overscrolled, the scrolling just stops and no any animation or effect is shown.

https://user-images.githubusercontent.com/43058990/161760443-c0236f7e-9178-4cf5-bc65-8a54e2af492b.mp4

Expected Behavior

When it is overscrolled, either "stretch", "bounce" or "glow" effect is shown.

Steps to Reproduce

sample.page.html

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 3</ion-title>
    </ion-toolbar>
  </ion-header>

  <ng-container *ngFor="let item of items; index as i">
    <ion-item>
      <p>{{ item + ' ' + (i+1) }}</p>
    </ion-item>
  </ng-container>
</ion-content>

sample.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-sample',
  templateUrl: 'sample.page.html',
  styleUrls: ['sample.page.scss']
})
export class SamplePage {

  items = [
    'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item'
  ]

  constructor() {}

}

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.19.0
   Ionic Framework               : @ionic/angular 6.0.14
   @angular-devkit/build-angular : 13.2.6
   @angular-devkit/schematics    : 13.2.6
   @angular/cli                  : 13.2.6
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 3.4.3
   @capacitor/android : 3.4.3
   @capacitor/core    : 3.4.3
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 1.5.0

System:

   NodeJS : v14.15.4
   npm    : 6.14.10
   OS     : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I am going to close this as this is outside the scope of what Ionic manages.

The overscroll effect in Android 12+ is not managed in the web layer. Instead, the Chromium webview must add support for it. I believe the Chrome browser has an experimental version of this, but it has not made its way to the webview. There appears to be an open ticket for something similar: https://bugs.chromium.org/p/chromium/issues/detail?id=1256902&q=overscroll%20stretch&can=2

[tomfong]

Thanks for the issue. I am going to close this as this is outside the scope of what Ionic manages.

The overscroll effect in Android 12+ is not managed in the web layer. Instead, the Chromium webview must add support for it. I believe the Chrome browser has an experimental version of this, but it has not made its way to the webview. There appears to be an open ticket for something similar: https://bugs.chromium.org/p/chromium/issues/detail?id=1256902&q=overscroll%20stretch&can=2

@liamdebeasi I tried to add a scrollable div outside <ion-app> in app.component.ts and add overflow-y: scroll; overscroll-behavior-y: contain to all elements in index.html, the overscroll effect was shown successfully without any issue. I wonder if Ionic really can't do something to make it overscroll.

[liamdebeasi]

The problem is that the overscroll effect would be added to non-scrollable content. We need the overscroll effect to be contained within ion-content which is not something that is supported according to https://bugs.chromium.org/p/chromium/issues/detail?id=1256902&q=overscroll%20stretch&can=2. For example, the overscroll effect likely would not work completely in a modal with the current workaround.

The inner scroll in ion-content has the same CSS you are applying to ion-app: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/content/content.scss#L111-L112 So once support for this is added, the overscroll effect should work without any changes by either the app developer or Ionic.

[tomfong]

The problem is that the overscroll effect would be added to non-scrollable content. We need the overscroll effect to be contained within ion-content which is not something that is supported according to https://bugs.chromium.org/p/chromium/issues/detail?id=1256902&q=overscroll%20stretch&can=2. For example, the overscroll effect likely would not work completely in a modal with the current workaround.

The inner scroll in ion-content has the same CSS you are applying to ion-app: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/content/content.scss#L111-L112 So once support for this is added, the overscroll effect should work without any changes by either the app developer or Ionic.

Thanks for your help. :)

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.