Closed tomfong closed 2 years ago
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
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.
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.
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 toion-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. :)
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.
Prerequisites
Ionic Framework Version
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
sample.page.ts
Code Reproduction URL
No response
Ionic Info
Additional Information
No response