Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: The new ion-content > 'div.scroll-content' breaks position:sticky and IntersectionObserver API (such as ion-virtual-scroll)

See original GitHub issue

Bug Report

Ionic version:

4.x [x] 5.x

Current behavior:

Any elements contained in an ion-content element, using position: sticky, will only stay stuck until the bottom of the new .scroll-content div implemented in issue #20185, scrolls off the screen.

Expected behavior:

Sticky elements should not be pushed off the screen as ion-content is scrolled down. This will manifest in other ways as well (not just position-sticky), but it will also affect intersection observers (such as those used on ion-img and ion-virtual-scroll).

Steps to reproduce:

https://stackblitz.com/edit/ionic-v4-angular-tabs-uiajby

Run the sample app and scroll down on Tab1.
The grey header will stick briefly, then unstick when the bottom of the .scroll-content div move up off the screen.

Related code:

<ion-content>
    <ion-card class="welcome-card">
      <ion-card-header>
        <ion-card-subtitle>Get Started</ion-card-subtitle>
        <ion-card-title>Welcome to Ionic</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
      </ion-card-content>
    </ion-card>


    <!-- This element will scroll off the viewport once the bottom of the ion-content .scroll-content div is reached -->
    <ion-list-header class="sticky-header">
      <ion-label class=ion-text-wrap>Resources (Scroll down to stick this element and see viewport issue)</ion-label>
    </ion-list-header>

https://stackblitz.com/edit/ionic-v4-angular-tabs-uiajby

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100000;
  background-color: grey;
}

Other information:

This is likely fixed by using the CSS min-height: 100% attribute on the .scroll-content div, rather than the height: 100% attribute.

Shadow DOM is great but makes it very difficult to work around issues like this. Not sure what the compromise needs to be, however, as no layout will be perfect.

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.13 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.0.0-beta.5
   @angular-devkit/build-angular : 0.900.0-rc.9
   @angular-devkit/schematics    : 9.0.0-rc.9
   @angular/cli                  : 9.0.0-rc.9
   @ionic/angular-toolkit        : 2.1.1

System:

   Android SDK Tools : 26.1.1 (/Users/lincoln/Library/Android/sdk)
   NodeJS            : v12.13.0 (/usr/local/lib/node_modules/node/bin/node)
   npm               : 6.13.6
   OS                : macOS Catalina
   Xcode             : Xcode 11.3.1 Build version 11C504