Ionic-framework: 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

[shanoinsano10]

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.

[rossholdway]

Thanks for the update. Do you think a fix will make it into v5.1.1?

[liamdebeasi]

Not at the moment. I need to figure out a fix for this first.

[rossholdway]

Ok. Happy to take a look at this and dig a little deeper into the codebase

[rossholdway]

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.

[liamdebeasi]

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.

[TiagoDamascena]

Any news or a workaround to this issue?

[liamdebeasi]

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.

[roman-rr]

Might be a temporary solution to use class title-large

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

instead of attribute size="large"

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

[Boosten]

I'm also seeing this behavior without the collapsable header and/or large title.

[liamdebeasi]

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