Tab buttons exist but are not visible

Question

I have a tab component with two tabs. The buttons are clickable, and clicking on where the buttons should be is correctly displaying the tab contents, but the buttons are invisible.

<ion-header>
  <ion-navbar>
    <ion-title>{{coupon.title}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div class="coupon-image-container">
    <img src={{coupon.mainImage}}/>
    <button ion-button class="left">Redeem</button>
  </div>
  <ion-tabs class="coupon-tabs">
    <ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab>
    <ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab>
  </ion-tabs>
</ion-content>

I don't think any other code is necessary but I'll provide more if needed. Like I said the contents of the mapTab and infoTab components are showing up fine, and clicking on where the tab buttons should be is switching between them, but the buttons are just blank white.

Edit: Just in case someone was going to ask, it still does the same thing if I remove everything else in the component except for the tab component like so:

<ion-tabs class="coupon-tabs">
  <ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab>
  <ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab>
</ion-tabs>

So it definitely has nothing to do with the other content.

Edit: I made a gif showing the problem: http://g.recordit.co/WDkjkSz6re.gif

Edit: Here's the styles on ion-tab

element.style {
}
main.css:25224
.coupon-tabs ion-tab {
    color: black;
    top: 56px;
}
main.css:5136
ion-tab.show-tab {
    display: block;
}
main.css:5145
ion-app, ion-nav, ion-tab, ion-tabs, .app-root, .ion-page {
    contain: strict;
}
main.css:5132
ion-tab {
    display: none;
}
main.css:5128
ion-nav, ion-tab, ion-tabs {
    overflow: hidden;
}
main.css:5116
ion-app, ion-nav, ion-tab, ion-tabs, .app-root {
    left: 0;
    top: 0;
    position: absolute;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
}

main.css:4986
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}
Inherited from ion-tabs.coupon-tabs.tabs.tabs-md.tabs-md-primary
main.css:25219
.coupon-tabs {
    position: relative;
    color: black;
}
main.css:4986
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

Answer 1

Look for class .tabbar and check its opacity. Change it if needed.