Several css values and javascript APIs report incorrect height values for installed web apps when <meta name="content"> has "viewport-fit=cover". The following values report heights of the available space *minus* safe-area-inset: - 100svh - -webkit-fill-available - visualViewport.height Note: It's very likely that this list is not complete, it's just what I ran into. The workaround for CSS is fairly easy (but should not be needed): ```css /* Use svh (with fallback for older versions) in regular safari: */ html, body { min-height: -webkit-fill-available; min-height: 100svh; } /* Switch to 'vh' when in standalone: */ @media all and (display-mode: standalone) { html, body { min-height: 100svh; } } ``` I'm not sure if there is a workaround for visualViewport.height though... Related: https://bugs.webkit.org/show_bug.cgi?id=237961
<rdar://problem/107512425>
Ah just now noticed a typo in my example/workaround code. For standalone display-mode, it should use 'vh' units as that does include safe-area-inset: ``` /* Switch to 'vh' when in standalone: */ @media all and (display-mode: standalone) { html, body { min-height: 100vh; /* <== should be 'vh', not 'svh' } } ```
Note: WebKit currently has a bug where safe-area-inset-bottom doesn't update then the keyboard is visible (https://bugs.webkit.org/show_bug.cgi?id=217754), so please make sure that the height reported: - does include safe-area-inset-* when the keyboard is NOT visible - does NOT include safe-area-inset-bottom when the keyboard IS visible - there may be other cases where safe-area-inset should NOT be included Thanks!