Wrong scroll-content margin-top on orientation change while scrolling (iOS)

Ionic Framework ionic-v3
1

Hi,
I show a long list on a page. There is an issue in iOS with the margin-top of the scroll-content when changing the orientation while scrolling. No issue if no scrolling happens at the time of the orientation change.

Steps

  1. Scroll the page
  2. Change the orientation while scrolling continues
  3. Margin-top of the scroll-content is set to a wrong value. Looks like height of the header is not taken into account. As a result, scroll-content moves behind the title bar. (Top part of the scroll-content is behind the header)
  4. Open a drill-down page. Then go back to the list. Margin-top is corrected. Looks like triggering a UI refresh corrects the margin-top

Greatly apprecate any help.

ionic info

cli packages: (/usr/local/lib/node_modules)
    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0
global packages:
    cordova (Cordova CLI) : 8.0.0
    Gulp CLI              : CLI version 3.9.1 Local version 3.9.1
local packages:
    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.1.0 ios 4.5.5
    Ionic Framework    : ionic-angular 3.9.2
System:
    Android SDK Tools : 26.1.1
    ios-deploy        : 1.9.2
    Node              : v8.10.0
    npm               : 5.6.0
    OS                : macOS High Sierra
    Xcode             : Xcode 9.4 Build version 9F1027a

Cordova Plugins

cordova-plugin-android-fingerprint-auth 1.4.3 "FingerprintAuth"
cordova-plugin-camera 4.0.3 "Camera"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-device-name 1.3.2 "Device-Name"
cordova-plugin-dialogs 2.0.1 "Notification"
cordova-plugin-email-composer 0.8.15 "EmailComposer"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-google-analytics 1.8.6 "Google Universal Analytics Plugin"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.1.2 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.1.0 "cordova-plugin-ionic-webview"
cordova-plugin-market 1.2.0 "Market"
cordova-plugin-media 5.0.2 "Media"
cordova-plugin-migrate-localstorage 0.0.2 "Migrate WebView Data"
cordova-plugin-network-information 2.0.1 "Network Information"
cordova-plugin-screen-orientation 3.0.1 "Screen Orientation"
cordova-plugin-secure-storage 2.6.8 "SecureStorage"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-touch-id 3.3.1 "Touch ID"
cordova-plugin-vibration 3.1.0 "Vibration"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 2.3.3 "Cordova sqlite storage plugin"
es6-promise-plugin 4.2.2 "Promise"
mx.ferreyra.callnumber 0.0.2 "Cordova Call Number Plugin"

device: iPhone X

2

I looked in to Ionic code (content.js) and found out that header size is wrong. Adding a small delay fixed the issue.

So in my code I listen orientation event and do a content.resize() after a small delay
Not a good solution. But works.