Search code examples
cssreactjssafariprogressive-web-apps

PWA IOS/Safari redirect navbar height problem

My pwa redirects you to another url for auth. Doing so the bottom browser navbar appears. When redirecting back the navbar disappears because the pwa is in fullscreen.

The problem is that there is a white margin at the bottom. The body { height: 100%} is not taking up 100% of the screen.

This actually explains my problem exactly, however the answer is not really satisfying https://discussions.apple.com/thread/251535534

Solution

  • fixed by adding viewport-fit=cover in the header

    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />