fix: resolve issues with safe area / systembars plugin by tafelnl · Pull Request #8535 · ionic-team/capacitor

tafelnl · 2026-07-21T13:05:24Z

This resolves some (most/all maybe even) current issues with the safe area / systembars plugin. These changes have been battle tested in production for several months now.

Closes #8525
Closes #8528
Closes #8416
Closes ionic-team/capacitor-keyboard#68
Closes ionic-team/capacitor-keyboard#61
Closes ionic-team/capacitor-keyboard#46
Closes ionic-team/capacitor-keyboard#28
Closes ionic-team/capacitor-keyboard#53
Closes ionic-team/capacitor-keyboard#57

And potentially some more. I haven't had time to look at all issues.

We already had a conversation about some of these design approaches earlier on. See #8268 and #8384 (comment)

tafelnl · 2026-07-21T13:06:04Z

I couldn't find documentation on how to (auto)generate this doc. But I think it should be good like this

tafelnl · 2026-07-21T13:06:20Z

    static final String BAR_STATUS_BAR = "StatusBar";
    static final String BAR_GESTURE_BAR = "NavigationBar";

-    // TODO: In Cap 9, add an additional option "full"


Not sure what this was for, but I removed it because I think with the addition of native all use cases are covered

tafelnl · 2026-07-21T13:06:56Z

    }

-    @JavascriptInterface
-    public void onDOMReady() {


Dong this only in the onPageCommitVisible listener seems to work equally fine in my testing

tafelnl · 2026-07-21T13:07:37Z

+        if (isSafeAreaPluginPresent()) {
+            Logger.warn(
+                "SystemBars",
+                "You should uninstall `@capacitor-community/safe-area`. Having this library installed can lead to unexpected behavior."


Having this warning here seems fair to me, as the two are strictly incompatible and there are still loads of users installing the community plugin

Ended up removing this warning. Because, actually, I think it makes more sense to solve this using an updating peerDependencies policy in the plugin itself. Nonetheless it might be good to mention somewhere in the docs that the use of (any) third party safe area plugins is discouraged. And if a developer wants to use such a plugin, that insetsHandling should be set to disable to prevent interference

tafelnl · 2026-07-21T13:08:22Z

                    .build();
            }

-            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.VANILLA_ICE_CREAM) {


I'm still not sure what this if-statement was meant for. I asked about it a few times in other PRs but never got a response, so I dont know the rationale behind it. Seems unnecessary to me. Moreover, it seems to be the root cause of many bug reports

tafelnl · 2026-07-21T13:09:04Z

+     *
+     * @default false
+     */
+    initialViewportFitCover?: boolean;


This one is really important to prevent layout jumps

Ended up renaming this to initialViewportFitValueHint (in 7abde6f) because it sounds a bit more logical

tafelnl · 2026-07-21T13:10:13Z

+        if (!systemBarsInsetsHandling.equals("disable") && keyboardResizeOnFullScreen) {
+            Logger.warn(
+                "SystemBars",
+                "You should omit `Keyboard.resizeOnFullScreen` in your `capacitor.config.json`. Other values can lead to unexpected behavior."


As I mentioned before, I think this config value should be deprecated altogether. If you still want it, I think it makes much more sense to include it in this plugin to prevent future bugs and resolve present bugs

tafelnl · 2026-07-21T13:25:54Z

     * This option is only supported on Android.
     *
-     * @default `DEFAULT`
+     * @default 'css'


I would strongly suggest to make native the default in Capacitor v9 as that would align with how the web and iOS platforms work right now. So I think that is the more expected behavior

tafelnl · 2026-07-21T20:40:07Z

        }

-        ViewCompat.setOnApplyWindowInsetsListener((View) getBridge().getWebView().getParent(), (v, insets) -> {
+        View view = getActivity().getWindow().getDecorView();


This is necessary for the keyboard animation to have the correct background color

tafelnl · 2026-07-22T05:41:48Z

        }

        initWindowInsetsListener();
-        initSafeAreaCSSVariables();


This was redundant, because it's already being handled in the initWindowInsetsListener

tafelnl · 2026-07-22T05:45:03Z

-            Insets safeAreaInsets = calcSafeAreaInsets(newInsets);
-            injectSafeAreaCSS(safeAreaInsets.top, safeAreaInsets.right, safeAreaInsets.bottom, safeAreaInsets.left);


I simplified this, because it was doing redundant recalculations which caused bugs across different webview versions

Vissie2 · 2026-07-22T11:17:16Z

@theproducer

tafelnl · 2026-07-24T14:13:39Z

We might want to call EdgeToEdge.enable(this) inside BridgeActivity.onCreate (if insetsHandling !== 'disable'). Because it's easy to forget. See #8522 for example.

However, one could argue that it's breaking change. In that case, it should then be documented somewhere, and instead be added in Capacitor v9.

On the other hand, your app will express unexpected behavior when not calling EdgeToEdge.enable(this), and there already were quite a few breaking changes in non-major updates in Capacitor v8 regarding the safe area. So it might make sense to add it nonetheless

…ortFitValueHint`

tafelnl added 4 commits July 21, 2026 14:58

fix: resolve issues with safe area plugin

573e4af

style: run npm run fmt

12c17e3

chore: run npm run build:nativebridge

1eaa3eb

docs: update documentation

a72fb9a

tafelnl commented Jul 21, 2026

View reviewed changes

typo

0b626b7

tafelnl commented Jul 21, 2026

View reviewed changes

fix: make InsetsHandling.css work correctly

294aded

tafelnl commented Jul 22, 2026

View reviewed changes

theproducer self-assigned this Jul 22, 2026

This was referenced Jul 24, 2026

[Bug]: safe area variables are calculated incorrectly with SplashScreen native plugin on Android 12 (WebView 140+) #8522

Open

[Bug]: Capacitor v8.3.0 extra gray space when keyboard is visible #8525

Open

tafelnl commented Jul 24, 2026

View reviewed changes

refactor: improve warning about unsupported values

2609ec0

tafelnl force-pushed the fix/resolve-issues-with-safe-area branch from 37861c7 to 281dc12 Compare July 27, 2026 06:41

feat: remove detectViewportFitCoverChanges and rename `initialViewp…

7abde6f

…ortFitValueHint`

tafelnl force-pushed the fix/resolve-issues-with-safe-area branch from c202f7f to 7abde6f Compare July 27, 2026 06:48

		Insets safeAreaInsets = calcSafeAreaInsets(newInsets);
		injectSafeAreaCSS(safeAreaInsets.top, safeAreaInsets.right, safeAreaInsets.bottom, safeAreaInsets.left);

Uh oh!

Conversation

tafelnl commented Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tafelnl Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tafelnl Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tafelnl Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tafelnl Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tafelnl Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tafelnl Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tafelnl Jul 21, 2026

Choose a reason for hiding this comment

Uh oh!

tafelnl Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tafelnl Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tafelnl Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tafelnl Jul 21, 2026

Choose a reason for hiding this comment

Uh oh!

tafelnl Jul 22, 2026

Choose a reason for hiding this comment

Uh oh!

tafelnl Jul 22, 2026

Choose a reason for hiding this comment

Uh oh!

Vissie2 commented Jul 22, 2026

Uh oh!

tafelnl Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

tafelnl commented Jul 21, 2026 •

edited

Loading

tafelnl Jul 21, 2026 •

edited

Loading

tafelnl Jul 21, 2026 •

edited

Loading

tafelnl Jul 21, 2026 •

edited

Loading

tafelnl Jul 21, 2026 •

edited

Loading

tafelnl Jul 27, 2026 •

edited

Loading

tafelnl Jul 21, 2026 •

edited

Loading

tafelnl Jul 27, 2026 •

edited

Loading

tafelnl Jul 21, 2026 •

edited

Loading

tafelnl Jul 21, 2026 •

edited

Loading

tafelnl Jul 24, 2026 •

edited

Loading