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

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

[rossholdway]

We’ve had to use a temporary CSS “hack” to workaround this as users were unable to reliably access menu items. Replace size="large" with class="title-large" and then add the following CSS to your global styles. Being global this may negatively impact other titles in your app, but it works for us.

.ion-cloned-element.ios.title-default {
  padding-top: 0px;
  bottom: 0px;
  align-items: flex-end;
  min-width: 100%;
  padding-bottom: 6px;
  font-size: 34px;
  font-weight: 700;
  text-align: start;
  padding-left: unset;
  padding-right: unset;
  padding-inline-start: 16px;
  padding-inline-end: 16px;
}

With the above class and global CSS applied, you still get the large title and page transition effects, but without the “scaling” of the title when pulling down on the page (that seems to be one transform-origin too many). The scaling is the same effect used on native, but I’d argue that losing this effect in return for content is more important. Maybe the scaling should be removed until a fix can be / is applied to the framework / webkit?

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