Ionic 3 large tab icon not displaying correctly in iOS

[acndur1a]

IONIC DETAILS

cli packages: (C:\Users\Oreo\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 6.5.0

local packages:

@ionic/app-scripts : 3.1.10
Cordova Platforms  : android 6.3.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v6.11.3
npm               : 3.10.10
OS                : Windows 10

Environment Variables:

ANDROID_HOME : C:\Users\Oreo\AppData\Local\Android\sdk\

Misc:

backend : pro

BUG DETAILS

I have a large icon in a tabbar that is positioned at the top. When I try to enlarge an icon to around 1.5em it partly appears cut off from view. I tried making the .tabbar height larger and increased z-index but the icon is still cut off from view - see below image

This does not happen on Android. The icon is viewable in correct size

Bug with iOS larger iOS tabbar

Tabs.html

<ion-tabs  [ngClass]="my_custom_class" selectedIndex="1" tabsPlacement="top"  no-shadow no-border no-border-top no-border-bottom >
  <ion-tab [root]="tab1Root" tabTitle="" tabIcon="icon-controller-stop" (ionSelect)="changeCustomClass('tabbar_normal')" ></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="" tabIcon="icon-circle" (ionSelect)="changeCustomClass('tabbar_transp')" ></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="" tabIcon="icon-triangle-up" (ionSelect)="changeCustomClass('tabbar_normal')"></ion-tab>
</ion-tabs>

**Custom theme/icons.scss

Problem happens with standard ionic icons also**

@font-face {
  font-family: 'icomoon';
  src:  url('../assets/fonts/icomoon.eot?b6z7qh');
  src:  url('../assets/fonts/icomoon.eot?b6z7qh#iefix') format('embedded-opentype'),
    url('../assets/fonts/icomoon.ttf?b6z7qh') format('truetype'),
    url('../assets/fonts/icomoon.woff?b6z7qh') format('woff'),
    url('../assets/fonts/icomoon.svg?b6z7qh#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size:0.55em;
  padding:0.1em;
  z-index: 999999;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ion-ios-icon-circle:before,
.ion-ios-icon-circle-outline:before
 {
  content: "\e900";
  font-size:1.7em;
}

[acndur1a]

Bug fixed in latest release

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.