iPhone X and tab bar

I’ve updated my app for the new iPhone X screen and everything looks ok, except for the bottom tab bar, which is still at the very bottom of the screen and therefor in the way of the swipe area. Do i have to adjust it manually, or is there something obvious i’ve not done?


I’m in a similar situation with a custom grid/navbar in my footer. I think that it’s just going to take a little time for all of the changes to be worked out, so I think it’s a waiting game for now (unless you’re able to pitch in and make pull requests on the ionic github)

Which ionic-angular version are you using? I think there was a fix for that in 3.7.0 or 3.8.0

I’m on the latest version of angular, but i’m still having issues. I’ve found a media query that solves the problem though, hopefully it will help for others.

  @media screen and (max-device-width: 375px) and (max-device-height: 812px) {
        .tabbar { margin-bottom: 44px;}

Hi there! 3.8.0 should contain all the updated CSS needed for iPhone X.

Also, there’s this blog post which goes over some of the finer details of updates you might need to make for the cordova platform/plugins.

I does contain the fix for tabs at the bottom of the screen but now screws up tabs at the top. Can we please make the fix only valid for bottom tabs?
See the faint indication of text on the tab up top…being pushed up fro allow room for the iPhone X bottom tabs fix…

i was having the same problem. Instead of upgrading to 3.8.0, i uninstalled completely and then installed it from scratch and that fixed all the errors i was having, it’s all working great now.

1 Like

uninstalled what? ionic?


noob here, so I created a tabs app with ionic creator free online, then used ionic build --pro to build it and everything is working great I even uploaded this web app to a server.

I can’t seem to figure out how to make the tabs bar, not overlapping with the Iphone X/XS home bar. I tried fiddling around with .css and adding env safe-area etc but I can’t seem to fix it?


Ionic CLI : 5.4.4 (C:\Users\cyber\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.5
@ionic/app-scripts : 3.2.2


cordova-res : 0.8.1
native-run : 0.2.9


NodeJS : v12.13.0 (C:\Program Files\nodejs\node.exe)
npm : 6.12.0
OS : Windows 10