Ionic 3.7.1 hides the toolbar / content on orientation change

Ionic version: (check one with “x”)
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

I’m submitting a … (check one with “x”)
[x] bug report
[ ] feature request

Current behavior:
Clicking on the tabs and rotating the screen would hide the toolbar or content. If we don’t click on the tabs then everything works fine. Screencast -> http://recordit.co/A9Z9qu6USk

Expected behavior:
Screen orientation change shouldn’t hide the toolbar / content

Steps to reproduce:

  • Create new ionic app using the tabs template
    ionic start demo tabs
  • In app.module.ts configure the tabs placement to be on top with below change
 IonicModule.forRoot(MyApp,{
      tabsPlacement: 'top',
      mode: 'md',
    })
  • Install ionic-angular version 3.7.1 or 3.7.1-201710241735
  • Run the app on your device
    ionic cordova run android
  • Without clicking on Tabs rotate your device – everything would work fine and toolbar still shows.
  • Click on any of the tabs and then rotate your device – Toolbar will be hidden

Other information:

Might be related to #13172, #13028

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.13.0
    ionic (Ionic CLI) : 3.13.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 3.0.0-201710161925
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.7.1-201710241735

System:

    Android SDK Tools : 25.2.5
    ios-deploy        : 1.9.2
    ios-sim           : 5.0.8
    Node              : v8.4.0
    npm               : 5.3.0
    OS                : macOS Sierra
    Xcode             : Xcode 9.0.1 Build version 9A1004

Misc:

    backend : legacy

Author: Fantashit

1 thought on “Ionic 3.7.1 hides the toolbar / content on orientation change

  1. In my case, move the tab to bottom position is not a good solution. I’m using 2 tabs for different purposes, so have both on the same position can cause some confusion for my users.
    I could fix this issue just adding a class attribute on my and on scss:
    .MyTabClass{ .tabbar{ top: 58px !important; } }

Comments are closed.