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…
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