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.


uninstalled what? ionic?