Safe area issues after migrating to angular 19

Ionic Framework Ionic Angular
1

Hi,

I have used Ionic in the past to create a mobile application and only encountered this issue with angular 19. Basically when I have this ionic layout component and in the past the header was correctly displayed in the safe area but in the new angular version the status bar or whatever notch the device have is displayed over the header. But it is not consistent and on some devices in works (speaking android only).

Similarly I am using ion-tabs for navigation and in the older version it was correctly displayed in the safe area but now on some devices it is overlapped by the devices home and back buttons…

I have tried using the ion-safe-area-{direction} variables but it did nothing…

ion-tab-bar {
padding-bottom: var(–ion-safe-area-bottom, 16px);
}

ion-header {
padding-top: var(–ion-safe-area-top, 16px);
height: calc(12% + var(ion-safe-area-top, 16px));
}

can you suggest some other way of solving this issue?
Thank you in advance

2

This sounds like Android’s Edge-to-Edge introduced in SDK 35.

Discussion on this is over here - Edge to edge Android.

Capawesome created a plugin for a temporary fix - Capacitor Android Edge-to-Edge Support Plugin - Capawesome. There has been some fixes in Capacitor 7.1 and 7.2 but people are still finding edge cases not handled looking at open issues.

There is also this open issue in the Ionic Framework repo - feat: Support new edge-to-edge enforcement introduced in Android 15 (API 35) · Issue #30090 · ionic-team/ionic-framework · GitHub

1 Like
3

Thank you very much man… Does that mean that in future Ionic/Capacitor releases this will be most likely fixed natively?

1 Like
4

I am just a community member so I cannot speak for the Ionic/Capacitor team. But, from what I’ve seen in the issues, it sounds like they are working towards a permanent solution. Like I said, they already made some changes in 7.1 and 7.2.

I am still running Capacitor 6 in our app, one because I haven’t had a chance to upgrade and two waiting for the wiggles to get worked out with v7 :grin:

1 Like
5

thanks :+1:
I fixed with this one