bug: Scrollbars flash into view during transition between pages on Android

[hellokingdom]

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
• [ ] Nightly

Current Behavior

When navigating between pages that have content longer than the viewport a scrollbar appears during the transition animation. This is jarring as the bar jumps between the current and new page. I also believe this has a negative impact on page transition performance.

Expected Behavior

During a transition the scrollbar should not appear

Steps to Reproduce

Create any tabs page where the content overflows the IonContent Transition to another page with content that overflows the IonContent Observe the scroll bars appearing during transition,

Code Reproduction URL

https://github.com/hellokingdom/android-scroll-bar-animation-jank

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 6.1.14

Capacitor:

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

Utility:

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

System:

NodeJS : v16.16.0 (/usr/local/bin/node) npm : 8.11.0 OS : macOS Monterey

Additional Information

https://youtube.com/shorts/kmFS665CqoQ

[liamdebeasi]

Thanks for the issue. Do you have a screen recording of the behavior you are reporting? I do not see this behavior on my end.

[hellokingdom]

I added one to original ticket. Due to the ratio / format it appears to have added it as a YouTube Short:

Link here https://youtube.com/shorts/kmFS665CqoQ

Notice how the scroll bars appear during the animation into the page.

[hellokingdom]

@liamdebeasi to follow up you can see a discussion re how to hide scrollbars here. Whilst they are most likely discussing the web implementation one of the suggestions does 'fix' the issue tho it's something of a hack.

https://forum.ionicframework.com/t/ionic-5-hide-scrollbar-on-ion-content/188570

ion-content { width: calc(100% + 15px); } ion-content::part(scroll) { padding-right: 15px; }

I expect the issue is with Chrome rather than Ionic but the end result is the overflow scroll bars appear during the animation cycle and then disappear and it's jarring to the user experience as the eye is drawn to the scrollbar flashing in and out.

It's particularly visible on a few of our screens. It would seem that if IonContent could hide the scrollbars during page transitions it would possibly fix the issue?

i.e something like

ion-content::part(scroll)::-webkit-scrollbar { display: none; } ion-content::part(scroll) { -ms-overflow-style: none; scrollbar-width: none; }

[heerenjasper]

Having the same issue. Going to wait for the official fix though.

[liamdebeasi]

Hi everyone,

Quick update on this issue. I can reproduce the reported behavior, but at the moment this does not appear to be a bug in Ionic Framework. I need to do more testing, but it seems that Chromium/Blink has the scrollbars flash into view when certain elements are composited as part of the page transition animations. I will reply here when I have more to share.

[liamdebeasi]

Hi everyone,

It looks like this behavior should be resolved in the upcoming Chromium 114 release. I can reproduce the reported behavior with v113 but not with v114. I will update this thread when the v114 release is available.

[liamdebeasi]

Hi everyone,

Chromium 114 was released a few months ago which should have a fix for this bug. I am going to close this, but let me know if there are any questions.

[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.