Resize Android webview to avoid islands

[fortuna]

This doesn't look good:

We need to figure out a way to avoid it. Perhaps with https://capacitorjs.com/docs/apis/inappbrowser

[GrantASL19]

This is something we are planning on looking into at ASL19.

It’s probably possible to work around this in web content using safe-area-inset-* variables (assuming this works correctly in the web view), and there could be design benefits to this, e.g. extending a coloured header’s background into the status bar.

If so I’d like to default to rendering the web view in the safe area (since most sites won’t implement safe area insets), but have a configuration option to have the web view extend across the entire display (as it looks now).

[daniellacosse]

Would you be interesting in doing this Grant? We do something similar on iOS: https://github.com/Jigsaw-Code/outline-app-maker/blob/main/wrapper_app_project/template/ios/App/App/OutlineBridgeViewController.swift#L38

In my experience safe-area-inset-* doesn't work, and is a site-side solution

[GrantASL19]

Would you be interesting in doing this Grant?

Yes ASL19 can work on this.

[fortuna]

I found these settings that may help:

android?: {
    /**
     * If set to "force", margins will be adjusted for edge to edge regardless of any other settings.
     * If set to "auto", or is missing, will check for Android 15 and the setting of [windowOptOutEdgeToEdgeEnforcement](https://developer.android.com/reference/android/R.attr#windowOptOutEdgeToEdgeEnforcement) and will adjust margins if on Android 15 and windowOptOutEdgeToEdgeEnforcement is false/missing.
     * If set to "disable", will not adjust margins at all.
     * In Capacitor 8, this default will be changed to 'auto'
     *
     * @since 7.1.0
     * @default disable
     */
    adjustMarginsForEdgeToEdge?: 'auto' | 'force' | 'disable';
}

ios?: {
    /**
     * Configure the scroll view's content inset adjustment behavior.
     *
     * This will set the
     * [`contentInsetAdjustmentBehavior`](https://developer.apple.com/documentation/uikit/uiscrollview/2902261-contentinsetadjustmentbehavior)
     * property on the Web View's
     * [`UIScrollView`](https://developer.apple.com/documentation/uikit/uiscrollview).
     *
     * @since 2.0.0
     * @default never
     */
    contentInset?: 'automatic' | 'scrollableAxes' | 'never' | 'always';
}

From https://capacitorjs.com/docs/config