ionic-framework: 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.

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 5
Comments: 23 (14 by maintainers)

Most upvoted comments

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?

rossholdway on Jun 25, 2020

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

DavidStrausz on Feb 26, 2020

Nope, I have not been able to isolate the issue (other than that it is related to transform-origin). It is possibly a bug in WebKit, but I have not been successful at reproducing this outside of Ionic yet.

liamdebeasi on Jun 18, 2020

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.

rossholdway on Apr 27, 2020

@Boosten Can you reproduce this in an Ionic starter app and provide a link to the repo?

liamdebeasi on Sep 4, 2020

Might be a temporary solution to use class title-large

<ion-title class="title-large">Header</ion-title>

instead of attribute size=“large”

roman-rr on Jun 23, 2020

Any news or a workaround to this issue?

TiagoDamascena on Jun 17, 2020

Yep that’s what I am seeing as well. What is interesting though is the issue does not happen if you get rid of the ion-icon elements (in the example app in the original post). Likewise, if you kept the ion-icon elements and got rid of the collapsable header, the issue goes away. It seems like the presence of multiple transform-origin usages is what is causing it to break. I am not sure why that would cause things to break though.

liamdebeasi on May 13, 2020

It looks like this is an issue with the pull down effect enabled by adding the size="large" attribute. Adding this sets a transform and a transform-origin in the ion-title shadow DOM. https://github.com/ionic-team/ionic/blob/215d55f1ebeb93988b513c5869faae14d1d51919/core/src/components/header/header.utils.ts#L147-L156

The presence of the transform or transform-origin seems to cause iOS Safari / Webkit to be unable to see the “size” of the element, and so the content height is then calculated incorrectly on initial load. Changing tabs fixes it because it uses display: none which triggers a layout refresh. You can fix this issue (kind of) by applying position: relative to the ion-title however we then run into issues with padding and line-hight during the page change animation.

rossholdway on May 13, 2020

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.

liamdebeasi on May 1, 2020

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

DavidStrausz on Apr 27, 2020

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?

shanejearley on Apr 10, 2020