bug: Ion Content in tabs will not scroll to bottom with collapsible header on iOS

[dallastjames]

Bug Report

Ionic version:
[x] 5.x

Current behavior:
When a large list of items is added to a page with a collapsible header on iOS and the list of items includes an ion-icon placed inside of a slot, the page will not scroll completely down and will instead stop a few items short. (The remaining items can be seen in the overscroll). Changing tabs and coming back to the original tab will correct this issue.

Expected behavior:
All items are visible after initial load.

Steps to reproduce:

• Clone example repo linked below
• Serve to a simulator or device (running in computer browser will not reproduce the issue, but the mobile safari browser can reproduce, or installing via Capacitor)
• When the ion-icon in tab1 is present, the page will not scroll fully until after navigating away and back to tab1.
• If the ion-icon in tab1 is removed, the page scrolls correctly on initial load.

Related code:

https://github.com/dallastjames/ionic-tabs-bug/blob/master/src/app/tab1/tab1.page.html

Other information:

Ionic info:

Ionic:
   Ionic CLI                     : 6.1.0 (/Users/pairing/.n/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.1
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.2.0
Capacitor:
   Capacitor CLI   : 1.5.0
   @capacitor/core : 1.5.0
Utility:
   cordova-res (update available: 0.9.0) : 0.8.1
   native-run                            : 0.3.0
System:
   NodeJS : v12.16.0 (/Users/pairing/.n/bin/node)
   npm    : 6.13.7
   OS     : macOS Mojave

[DavidStrausz]

@liamdebeasi I also ran into this issue. It seems like the --offset-bottom css var of ion-content is not applied correctly. Simply unchecking + checking it again in inspector fixes the issue.

At first I thought its an angular CD bug, but no luck with manual change detection.

[ahmadtawakol]

As a workaround that works nicely for now, add this at the end of your content

<ion-toolbar class="large-title-fix"></ion-toolbar>

and put this in your css:

ion-toolbar.large-title-fix {
  padding-top: env(safe-area-inset-top);
}

[jahertor]

As a workaround that works nicely for now, add this at the end of your content

<ion-toolbar class="large-title-fix"></ion-toolbar>

and put this in your css:

ion-toolbar.large-title-fix {
  padding-top: env(safe-area-inset-top);
}

Still happens to me.

[felixliu226]

works for me

[shanejearley]

It seems to me that scroll to bottom is working with just the collapsible header, but not when there is a footer (some of the content at the bottom is hidden behind the footer). Has anyone experienced this?

[rossholdway]

As @DavidStrausz says, it looks like the .inner-scroll of ion-content is not picking up the --offset-bottom CSS value, so it's not applied to the bottom property. I'm seeing this in the latest version of Ionic (5.0.7).

Seems to happen reliably for me when you have a list of content longer than the screen, and you then navigate to another page. On returning, you can't scroll to the end.

[DavidStrausz]

@rossholdway I think this was fixed in #20790 and it will be released with ionic 5.1.0 sometime soon :)

[rossholdway]

Unfortunately it looks like #20790 hasn't fixed this. I still see it after updating to Ionic Angular v5.1.0

[liamdebeasi]

This is a separate issue that was not resolved by #20790. I am still trying to isolate the root cause of the issue. As of now it appears to be due to the presence of multiple transform-origin properties, but I am still digging into it.