Bug 254868 – Incorrect height values when viewport-fit=cover is set for installed web apps

• Status: NEW
• Component: Layout and Rendering

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

[Radar WebKit Bug Importer]

<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!