Viewport-fit=cover for iPhone X breaks other views on iPhone. How to solve it?

I am building an app for the iPhone and I noticed that viewport-fit=cover, which is needed for the iPhone X view, is breaking my other views (let’s say the iPhone 7).

What happens? Well, when I use viewport-fit=cover it pushes my content / body upwards, making it seem great on the iPhone X, but bad on iPhone 7, as the content gets closer to the statusbar above.

How can I solve this issue?


You can see the content (yellow things) very close to the statusbar, while it wasn’t the case when I didn’t optimised it for the iPhone X with viewport-fit=cover

facing the same issue

This works to me: Status bar overlaps navbar content