bug: chrome, tabs, focusing partially visible element causes entire view to scroll

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

On chromium browsers, when using tabs, focusing an element that is partially visible will makes the browser to attempt to scroll so that the focused element is fully visible on the screen (to my knowledge, this is a feature that only exists on chromium browsers).

But because the .inner-scroll part of the <ion-content> component is bigger than the <ion-content> itself due to negative positioning and additional padding:

.inner-scroll {
  top: calc(var(--offset-top) * -1);
  bottom: calc(var(--offset-bottom) * -1);
  padding-top: calc(var(--padding-top) + var(--offset-top));
  padding-bottom: calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));
}

This makes the browser thinks that content that are partially visible (relative to the <ion-content>) are alreay visible within the .inner-scroll, therefore, the browser will attempt to scroll other element of the interface to make the element fully visible instead of scrolling the .inner-scroll (and yes, the browser is able to scroll element that are not even scrollable, i.e: overflow: hidden).

In my case, the browser is scrolling the closest .ion-page parent of the <ion-content>, this makes the entire app move up, making the <ion-header> no longer accessible and creating empty space below the <ion-content>.

You can see this by executing this command in the browser’s console:

document.querySelector('ion-content').closest('.ion-page').scrollTop;
// Should outputs 0, but outputs 56 after the browser has made the focused element fully visible

This outputs the exact same value as the negative positioning, in my case, the .ion-page (which is not even scrollable) has been scrolled by 56px.

Expected Behavior

The browser should not scroll the parent .ion-page and should scroll the .inner-scroll instead.

The only solution I see to this, is not to make the .inner-scroll bounding box bigger than the one of the <ion-content>. Is there a reason it has been made like this in the first place ?

You will see on the video I have uploaded, that I can fix this by applying the padding value to the margin instead. In my case:

ion-content::part(scroll) {
  padding: 0;
  margin: 56px 0;
}

But this could also be solved with:

ion-content::part(scroll) {
    top: 0;
    bottom: 0;
    padding: 0;
}

Which entirely remove the need of the negative positioning, but these solutions may have side effects that I’m not aware of.

Steps to Reproduce

• Create an app with an <ion-tabs> and <ion-content>
• Add several elements that are focusable inside of it, so that the <ion-content> become scrollable
• Make it so you have a focusable element partially visible on your screen (it works best if you have big element like in my video)
• Click the partilly visible element to focus it (it only works if you focus a non focused element, as the browser does not attempt to scroll to make it fully visible when it is already focused)

You’ll see that the browser has scrolled the parent .ion-page instead of the .inner-scroll.

Code Reproduction URL

https://github.com/Julien-Marcou/ionic-focus-scroll-bug

• npm install
• ng serve
• open with chrome (don’t scroll the viewport)
• toggle mobile device toolbar
• use a resolution of 360px wide by 740px tall (the bug is reproducible with any resolutions, but my reproduction repo makes it easier to see at this resolution)
• click on the 4th button (don’t scroll before clicking it, the button should only by partialy visible before clicking it)
• see how the content has been scrolled so the 4th button is now fully visible and how the header is no longer visible

Ionic Info

@ionic/cli : 6.18.1 @ionic/angular : 6.0.1 @angular-devkit/build-angular : 13.1.2 @angular-devkit/schematics : 13.1.2 @angular/cli : 13.1.2 @capacitor/core : 3.3.3 NodeJS : v16.13.1 npm : 8.3.0

Additional Information

Here is a video demonstrating the issue on Chrome:

https://youtu.be/HaSpes69u-U

This video has been recorded using Ionic 6 on Chrome, but the bug can be reproduced on Android 12 with Ionic 5 and Ionic 6.

[liamdebeasi]

Whoops sorry, not sure how it asked you for a reproduction again 😂 . I will take a look at your reproduction and get back to you - thanks!

[csaar95]

I accidentally solved it in our use case, when removing the fullscreen property of IonContent.