iPhone X bottom margin


I am trying to update my ionic v1 app to support iPhone X dimensions. I am unable to get the footer to adapt to the virtual home button. I am attempting to move the bottom tabs up a bit, however a white line appears. How can I get that bottom bar to be the same color as my footer? I added a bottom margin of 15 px and it gives me a little white line as you can see in the image below.

.tab-nav {
  margin-bottom: 15px;
  background-color: #00367b;


Try using a padding rather than a margin. Margins “push” the content box up and padding will pad the content box while keeping the background colour. I suggest doing a bit of reading up on css. Good luck!

Did you ever get this resolved? Where did you add the code you mentioned above? I’m coming from creator to Ionic Pro.

Same problem here. In my case, viewport-fit=cover give me some problems