bug: Platform MD ion-content wrong --offset-bottom

Bug Report

Ionic version: [x] 5.x

Where? In the Ionic 5 tabs example. On the iOS theme this works. On the MD theme it does not work.

Current behavior: <app-explore-container> has a wrong y-position in the tab, which was initially loaded. The <ion-content> has on reload of the current tab a wrong offset of --offset-bottom:0px;

Expected behavior: The <app-explore-container> component should have the same y-position on every tab on the MD (Material Design) theme. <ion-content> should have an offset of --offset-bottom:57px; on reload of the current tab, as the other tabs have, if you switch to some other tab.

Steps to reproduce: Start a new Ionic 5 Tab Project and open Chrome with the Pixel 2 responsive emulator and switch between the tabs. The content position will change.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 5.1.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.0, (and 4 other plugins)

System:

   Android SDK Tools : 25.2.3 (/Users/stefanrein/Library/Android/sdk)
   ios-sim           : 8.0.2
   NodeJS            : v10.15.3 (/usr/local/bin/node)
   npm               : 6.14.3
   OS                : macOS
   Xcode             : Xcode 11.4 Build version 11E146

Example, when the Tab1 URL was initially loaded: http://localhost:4200/tabs/tab1

https://github.com/ionic-team/starters/tree/master/angular/official/tabs

[StefanRein]

Reproduction

Please follow these steps to reproduce (from https://ionicframework.com/docs/intro/cli):

Edit: Or clone following repository: https://github.com/ionic-team/starters/tree/master/angular/official/tabs

npm uninstall -g ionic
npm install -g @ionic/cli

ionic start myApp tabs

// Choose: ❯ Angular | https://angular.io 
// ? Integrate your new app with Capacitor to target native iOS and Android? (y/N) 
// Choose: N

cd myApp/
ionic serve

// > ng run app:serve --host=localhost --port=8100

Now on macOS Catalina it opens the latest Chrome Browser (Version 81.0.4044.129)

1. Open the Developer Tools (Alt + CMD + i)

    The MD Mode is active.
    Switching between tabs: **It works as expected.**
   

2. Chrome: Toggle Device Toolbar (the Mobile / Tablet icon)

3. Select iPhone X and refresh the page (CMD + r)

    It has changed the mode to iOS.
    Switch between the tabs: **It works as expected.**
   

4. Select Pixel 2 XL and refresh the page (CMD + r)

    It has changed the mode to MD.
    Switch between the tabs: **It does not work as expected.**
   

The content jumps like I showed in the screenshots above if you draw a horizontal line between the text.

---

Do you need further information? I am happy to provide you more information.

[eeschiavo]

I have the same problem. Is there any solution?