Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion core/system-bars.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const setStatusBarAnimation = async () => {
## Configuration
| Prop | Type | Description | Default |
| ------------- | -------------------- | ------------------------------------------------------------------------- | ------------------ |
| **`insetsHandling`** | <code>string</code> | Specifies how to handle problematic insets on Android.<br>This option is only supported on Android.<br><br>`native` = (recommended) For older Chromium versions (< v140) this embeds the webview with padding and sets the `env(safe-area-inset-*)` variables to `0px`. For newer Chromium versions (>= v140) this makes sure the webview adheres to the `viewport-fit` meta tag. If set to `viewport-fit="cover"` this will make the webview edge-to-edge and the `env(safe-area-inset-*)` variables will contain the correct values. With those values you could set padding for example so make sure the webview is shown correctly.<br><br>`css` = This is the same as `native`, but it also injects CSS variables (`--safe-area-inset-*`) containing correct safe area inset values into the webview.<br><br>`disable` = (not recommended) Disable safe area insets handling completely.<br>This shifts the responsibility from Capacitor to your own code to handle the insets.<br>Be aware that this might result in a visually broken UI if your native app code and the content loaded into the webview do not correctly handle safe area insets.<br>| <code>css</code> |
| **`insetsHandling`** | <code>string</code> | Specifies how to handle problematic insets on Android.<br>This option is only supported on Android.<br><br>`native` = (recommended) For older Chromium versions (< v140) this embeds the webview with padding and sets the `env(safe-area-inset-*)` variables to `0px`. For newer Chromium versions (>= v140) this makes sure the webview adheres to the `viewport-fit` meta tag. If set to `viewport-fit="cover"` this will make the webview edge-to-edge and the `env(safe-area-inset-*)` variables will contain the correct values. With those values you could set padding for example so make sure the webview is shown correctly.<br><br>`css` = This is the same as `native`, but it also injects CSS variables (`--safe-area-inset-*`) containing correct safe area inset values into the webview.<br><br>`disable` = (not recommended) Disable safe area insets handling completely.<br>This shifts the responsibility from Capacitor to your own code to handle the insets.<br>Be aware that this might result in a visually broken UI if your native app code and the content loaded into the webview do not correctly handle safe area insets.<br>| <code>native</code> |
| **`initialViewportFitValueHint`** | <code>string</code> | Set an initial value for the to be detected `viewport-fit=` meta tag value.<br>For most apps that support edge-to-edge this value will eventually be `cover`.<br>Therefore you might want to set this value to `cover` to help prevent layout jumps and glitches.<br>If you know the value to be `cover` initially, you can set it here.<br>The value will always end up correctly, no matter what you set here,<br>as long as `insetsHandling` is set to `native` or `css`.<br>It only exists to help prevent layout jumps and glitches.<br><br>This option is only supported on Android. | <code>undefined</code> |
| **`style`** | <code>string</code> | The style of the text and icons of the system bars. | <code>DEFAULT</code> |
| **`hidden`** | <code>boolean</code> | Hide the system bars on start. | <code>false</code> |
Expand Down
Loading