bug: collapsible header resets scroll position when triggered by iOS overscroll

Bug Report

Ionic version: [x] 4.x

Current behavior: When using a collapsible header with a large title on a page that’s not high enough to scroll only the iOS overscroll functionality takes effect. When the page is scrolled until the point where the opacity of the main and the scroll header is toggled the scroll position is reset which causes a quit ugly and janky behaviour.

Expected behavior: It works the same way no matter if its normal scrolling or overscrolling.

Steps to reproduce: Place a collapsible header in an otherwise empty ion-content, run it on an iOS device and try to scroll the page until the point where the scroll header should be hidden and the main header should be visible.

Related code: If I remove all function calls where the scroll header is activated/deactivated: https://github.com/ionic-team/ionic/blob/0a7aae28a7eb0270cdcd100933c01850403b66db/core/src/components/header/header.utils.ts#L104 https://github.com/ionic-team/ionic/blob/0a7aae28a7eb0270cdcd100933c01850403b66db/core/src/components/header/header.utils.ts#L119 and also the calls where the opacity of the main toolbar is changed: https://github.com/ionic-team/ionic/blob/0a7aae28a7eb0270cdcd100933c01850403b66db/core/src/components/header/header.utils.ts#L63

…it works like expected.

Let me know if you should need an example repo, but it should be quite easy to reproduce it from the example code from the docs.

Other information: Related to overscroll but more of a performance thing: you could possible save a few DOM writes here: https://github.com/ionic-team/ionic/blob/0a7aae28a7eb0270cdcd100933c01850403b66db/core/src/components/header/header.utils.ts#L52 if you only actually scale the title if scrollTop is <= 0, overscroll(-top) is always a positive margin and always results in scale being 1.

Ionic info:

Ionic:
   Ionic CLI                     : 5.4.5 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.3
   @angular-devkit/build-angular : 0.803.12
   @angular-devkit/schematics    : 8.3.12
   @angular/cli                  : 8.3.12
   @ionic/angular-toolkit        : 2.0.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 26 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.2 Build version 11B52

[liamdebeasi]

Glad to hear the issue is resolved! This dev build didn’t include the fix in https://github.com/ionic-team/ionic/pull/19682 so that’s why it still has that behavior.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.