bug: chromium webview, scrolling latches underneath sheet modal

[derWebdesigner]

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

v7.x

Current Behavior

The background behind a modal is scrolling with the opened modal on Android, iOS seems to work fine.

https://github.com/ionic-team/ionic-framework/assets/5920762/b40b2fff-8dff-46ab-af18-aefd7f32c57c

Expected Behavior

The swipe gesture should only affect the modal itself.

Steps to Reproduce

1. Create a scrollable page
2. Open a modal and scroll it on Android (iOS and desktop work fine)

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.8 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : not installed @angular-devkit/build-angular : 16.2.6 @angular-devkit/schematics : 16.2.6 @angular/cli : 16.2.6 @ionic/angular-toolkit : 10.0.0

Capacitor:

Capacitor CLI : 5.5.0 @capacitor/android : 5.5.0 @capacitor/core : 5.5.0 @capacitor/ios : 5.5.0

Cordova:

Cordova CLI : not installed Cordova Platforms : not available Cordova Plugins : not available

Utility:

cordova-res : not installed globally native-run : 1.7.3

System:

NodeJS : v18.17.0 (/usr/local/bin/node) npm : 9.6.7 OS : macOS Unknown Xcode : Xcode 14.3.1 Build version 14E300c

Additional Information

Using tricks like disabling the scroll entirely like suggested in this older issue for iOS won't solve the issue because the content inside the modal isn't scrollable anymore then as well.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[derWebdesigner]

@liamdebeasi Definitely reasonable to request reproduction, so I just took the time and created an entirely new project with ionic start and the list template. Instead of opening a new page when clicking a message in the list I simply opened a new modal via the ModalController and ran the app on 2 different Android devices (Pixel 5 with Android 13 and Pixel 8 Pro with Android 14). The outcome is identical. Feel free to let me know if there is anything else that I can do to solve the issue or find out more about it.

I also tried to apply the ios and android style to the modal but since this is only visual I guess there wasn't a difference either.

https://github.com/ionic-team/ionic-framework/assets/5920762/986bd544-f0fd-461d-93ce-42ec37bd6d44

[liamdebeasi]

Thanks! Do you have a link to the source code so we can reproduce the issue on our end?

[derWebdesigner]

@liamdebeasi Sure, here we go: https://github.com/derWebdesigner/ionic7-background-scroll-test/tree/main/test

[derWebdesigner]

Quick hint: The ActionSheetController is having the same issue (which makes sense) but the interesting part is that this only happens when you try to scroll the content of the ActionSheet. If you try to scroll on the dark background the scroll is not propagated to the actual background.

[liamdebeasi]

Hey there,

Apologies for the delay. I took a look at this, and I am fairly certain this is a web view bug. I cannot reproduce on Chrome for Android as well as iOS. I'll keep digging and see if I can figure out the root cause.

[derWebdesigner]

@liamdebeasi No worries, I highly appreciate any kind of feedback. It's funny that I thought the same today when I recognized an issue with the new Dynamic Fonts of Ionic and FontAwesome. On the web browser, they scale perfectly but on the device itself, they don't and therefore look super weird with bigger font sizes. Researching I at least found out that this might be related to web view. Is this something we need to report to Google then?

[liamdebeasi]

The next steps for the team is to isolate this issue outside of Ionic. Once we create a minimal reproduction then we can report this to Google. Based on our findings we may or may not be able to apply a workaround inside of Ionic temporarily.

[liamdebeasi]

I was able to verify that this is a bug in the Chromium webview. I reported this issue to the Chromium team here: https://issues.chromium.org/issues/323953917

[derWebdesigner]

@liamdebeasi That's so "awesome" because we are a step further now since this is really annoying. Thank you very much for taking the time and not forgetting about it. That's so rare these days, a virtual high-five to you!