Ion-Tabbar shadow cut off

Currently we are using a cutomized tabbar in our app. We added some border-raduis and shadow to the tabbar as the following:

ion-tab-bar {
    border-radius: 35px 35px 0 0;
    border: none;
    padding-top: 5px;
    padding-bottom: Calc(env(safe-area-inset-bottom) + 5px);
    -webkit-box-shadow: 0px -12px 42px -1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px -12px 42px -1px rgba(0, 0, 0, 0.1);
    box-shadow: 0px -12px 42px -1px rgba(0, 0, 0, 0.1);
}

In the webversion everthing is fine. But as soon as the app is running on a native device the shadow is cut off. (See the attached picture) I first thought was that ion-content has some sort of offset at the bottom, I tried serveal things but none of it was fixing the error.
Has someone faced this issue before or even has a solution to my problem?