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

6

Continuing the discussion from Safe area issues after migrating to angular 19:

Hello
I also face the same issue using ionic/angular version 8.2.4 and angular version 19
then I do some research and find that ionic has not officially announced that its compatible with latest angular versions like newer versions of 18 , 19 and 20
so i decided to downgrade project to angular 17 to test and it successfully solved the issue of header overlapping issue with status bar or content too and it somehow works with earlier versions of angular 18 too
if any other developer has proper solution for this without downgrading angular version than please reply

7

The docs were just updated saying Ionic supports Angular 20.

A change was also just made in Ionic 8.6.3 to support Angular’s latest build system.

Your first step should be to update to the latest release of Ionic v8.