[Feature]: use native safe area insets

[tafelnl]

Description

Deprecate the old way of using safe area insets (custom vars) and use the native approach instead

Platforms

• iOS
• Android
• Web

Request or proposed solution

Would you be willing to do this? We've discussed this before. For example here and here.

The current approach taken by Capacitor is quite different than the native approach and to me it seems inferior. I've outlined the differences here.

The main reason you took this approach, was

For us, the issue isn’t spec compliance — it’s whether this is reliable enough to serve as a runtime contract across OEMs, OS versions, etc.

However, as far as I can see, it seems, the current approach achieves quite the opposite. There were a few bugs that needed to be fixed (while it already was marked as production-ready) and there are still other open bugs (ex. 1, ex. 2).

What's also bothering me, is that the code has a few quirks.

• The code doesn't bother for Android versions prior v15, which makes older Android versions just break without a developer directly noticing (source)
  • ^{This seems to contradict the reason why you chose to go this route btw}
• When installing Capacitor v8 fresh, a developer would never know (without reading the docs thoroughly) that his app is broking on Chromium versions < M140 (source)

There are a few other code changes, which I do not quite understand (ex. 1, ex. 2, ex. 3)

Meanwhile, the https://github.com/capacitor-community/safe-area seems to work without any problems on a few enterprise-sized production apps. With one of its advantages being that it doesn't need any configuration changes when integrated in the Capacitor core.

I, myself, do not see any reason to not switch strategies. But if you're not up for it, you can close this issue and I will stop pursuing this going forward. Instead I will then just keep maintaining the community plugin

Alternatives

No response

Additional Information

No response

[zarko-tg]

@tafelnl Thanks for bringing attention to the matter again, and also maintaining @capacitor-community/safe-area
I found a good number of corner cases / issues (some related to VK), that I had to come up with a very unorthodox solution which seems to work well / better than relying on what comes out of the box with Capacitor 8 atm. If interested I may provide a fuller description or a demo project, but in short it goes something like this for us (that already use @capacitor/keyboard as a dependency):

1. Removed @capacitor/status-bar.
2. Installed @capacitor-community/safe-area.
3. Capacitor config: Don't use Keyboard resizeOnFullScreen. Set SystemBars insetsHandling to 'disable'.
4. Patch MainActivity to manually enable EdgeToEdge and setOnApplyWindowInsetsListener / setPadding(0, 0, 0, windowInsets.getInsets(WindowInsetsCompat.Type.ime()).bottom)
5. Optional (but likely wanted if using Ionic 6 for ex.) - Patch core.css in respective @ionic/angular version with https://github.com/ionic-team/ionic-framework/pull/30865/changes#diff-8371750710eecf6a609337a240b7db295073f746f1cda13248f9780cc6f6ff24

It's quite a bit to hack around, but in lack of a quality alternative and due to deadlines this is what I ended up with.

If the matter is not addressed in Capacitor any time soon, we're moving with this kind of (ugly) hack forward.

[tafelnl]

@zarko-tg some of those steps seem unnecessary. You can open an issue in the community plugin regarding this if you want. It's a bit off topic for this issue