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?
1 post - 1 participant