style of set the opacity to 0

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:
Tab bar not appearing, and it’s css-style set opacity to 0.

Expected behavior:
A tab bar should be appear in bottom of page.

Steps to reproduce:

1. Create a blank project
2. Remove all codes from home.html
3. Add tabs to home.html

Related code:
Modified home.html:

<ion-tabs>
  <ion-tab tabTitle="Tab1" [root]="tab1"></ion-tab>
  <ion-tab tabTitle="Tab2" [root]="tab1"></ion-tab>
  <ion-tab tabTitle="Tab3" [root]="tab1"></ion-tab>
</ion-tabs>

Other information:

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

cli packages: (%%APPDATA%%\npm\node_modules)

    @ionic/cli-utils  : 1.15.0
    ionic (Ionic CLI) : 3.15.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    Node : v6.11.4
    npm  : 3.10.10
    OS   : Windows 7

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

Partial of generated main.css content:

.tabbar {
  left: 0;
  bottom: 0;
  position: absolute;
  z-index: 10;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%%;
  opacity: 0;
}