CSS Issue with Ion-tab-bar and ion-content issue - iOS build

Ionic Framework Ionic Angular
1

I have tried to style the ion-tab-bar for my app using the following style:

ion-tab-bar{
    position: absolute;
    border-radius: 10px;
    width: 95%;
    margin: 5px 2.5%;
    bottom: 0px;
}

ion-tabs{
    padding-bottom: 66px;
    background: linear-gradient(to bottom right, #2CD695, #979CD6);
}

When building for Android there are no Issues as it displays it exactly as styled. However when building for iOS the css border-radius is completely ignored. Along with this the top of the ion-content seems to be under the statusbar whereas in Android no such issue is faced. Please see the attached screenshots.

Hope to get some quick advice from the community. Thanks in advance

iPhone 11

Screen Shot 2020-04-16 at 1.52.26 pm
Screen Shot 2020-04-16 at 1.52.26 pm898×1866 110 KB

iPhone 8

Screen Shot 2020-04-16 at 2.04.35 pm
Screen Shot 2020-04-16 at 2.04.35 pm858×1704 115 KB

Android

Screen Shot 2020-04-16 at 2.18.58 pm
Screen Shot 2020-04-16 at 2.18.58 pm858×1704 153 KB

2

After some research, I decided to only style the Android version and ditch the iOS version. From Ionic Docs add platform specific styles so that iOS would use the standard ion-tab-bar and only Android would use the styled one.

ion-tab-bar.md{
    position: absolute;
    border-radius: 10px;
    width: 95%;
    margin: 5px 2.5%;
    bottom: 0px;
}

I fixed the overlap of the statusbar by using the env() variable to style the ion-content as there is no ion-header, personally with tabs I feel there shouldn’t be a header. Looks more aesthetically pleasing:

.ios ion-content{
    --padding-top: env(safe-area-inset-top);
}
3

Hey, I know this has been some time, but I ran into the same issue, you just have to eliminate all padding and margin using css.

ion-tab-bar {
  bottom: 20px;
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
  border-radius: 16px;
  width: 92%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  height: 56px !important;
  --background: #1f1f1f;
}

ion-tab-button {
  --color: var(--ion-color-medium);
  --color-selected: #fff;

}