bug: large header causes type error / race condition

Bug Report

Ionic version:

[x] 4.x

Current behavior: Sometimes when navigating/scrolling between various pages relatively fast I see an error in console:

TypeError: undefined is not an object (evaluating 'this.collapsibleMainHeader.classList')

Expected behavior: No error is thrown, large header also works in rare situations where this.collapsibleMainHeader may be undefined for whatever reason.

Steps to reproduce: Navigate and scroll around an app that uses large headers, sooner or later the bug appears. Not very consistent but yeah that’s the problem with race conditions et al.

Related code: The error is caused by this line of code: https://github.com/ionic-team/ionic/blob/215d55f1ebeb93988b513c5869faae14d1d51919/core/src/components/header/header.tsx#L132

Possible fix: use optional-changing instead of non-null assertion.

Ionic info:

Ionic:

   Ionic CLI                     : 6.2.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.4
   @angular-devkit/build-angular : 0.900.5
   @angular-devkit/schematics    : 9.0.5
   @angular/cli                  : 9.0.5
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.2, (and 27 other plugins)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   ios-deploy : 1.9.2
   ios-sim    : 8.0.2
   NodeJS     : v12.4.0 (/usr/local/bin/node)
   npm        : 6.11.3
   OS         : macOS Catalina
   Xcode      : Xcode 11.3.1 Build version 11C504

[DavidStrausz]

Thank you very much Liam, your help is much appreciated! 😃

[liamdebeasi]

Hmm that’s strange. I’ll merge in the change that keeps the app working, but will dig into the other visual glitch some more.