| Summary: | Incorrect height values when viewport-fit=cover is set for installed web apps | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | ik |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | bfulgham, matan.hershberg, simon.fraser, webkit-bug-importer, wenson_hsieh, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 16 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=255852 | ||
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! |
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