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

• Component: Layout and Rendering
• Status: NEW

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!

This is still an issue on iOS 18.3.1 (haven't tested with 18.4 yet).

I think `inset` is affected as well when in standalone and viewport-fit=cover.

I expect the following element to stick to the bottom of the display

```css
.stick-to-bottom {
  position: absolute;
  inset: auto 0 0;
}
```

But the element sits above the bottom (haven't checked the exact offset, but looks to be the safe-area-insets top and bottom from eyeballing it). Switching to `position: fixed;` fixes it (which is funny, because it says `fixed` :P)