I have updated my app (Ionic 8, VueJs) to Capacitor 7 and noticed that the app doesn’t “respect” the system toolbar on tablets, instead the content (header) is squeezed behind the system toolbar, causing the toolbar title to be halfway cut off.
Same goes for my ion-tab-bar - the icons in the tab bar look squeezed (scaled) down and the respective tab labels aren’t even visible. They seemingly are hidden behind the system’s bottom bar (don’t know how you call it).
I have tested on two Android tablets (Samsung Galaxy A8 and Samsung Galaxy S6 Lite) and both show the above issue.
In Android Studio though, on a virtual Pixel 7 Pro (which is a phone, not tablet), it looks as expected.
However, it looked ok on the two tablets before, meaning with Capacitor 6.
Edit: sometimes the ion-tab-bar un-squeezes and shows correctly (after closing and opening the app - not force closing). It almost looks a bit like an issue related to ion-safe-area, however, I haven’t changed anything in this regard.
Migrating to Capacitor 7 required to set targetSdkVersion to 35 and thus edge-to-edge is enforced.
It seems like this is a scenario that Capacitor/Ionic should prioritize addressing. As far as I know, there is currently no available documentation on this topic…
I’m facing a similar issue after updating to Capacitor 7. My toolbar content and tab bar icons seem misaligned or squeezed on Android tablets, even though they looked fine with Capacitor 6.
Thanks Lucien, searching based on this information I found out that apparently there are already tickets on GitHub for Ionic as well as Capacitor.
Unfortunatelly I wasn’t able to remedy this issue, neither with your suggested fix, nor with the plugin @capacitor-community/safe-area which someone there mentioned. So I guess I’ll have to wait for a fix from the Capacitor dev team.
I am using IonHeader in my ReactJS project, but I am facing an issue. The header is not displaying properly—it is positioned at the very top of the screen, with no space above it. It seems like the content is overlapping or there’s no padding/margin at the top.
Could anyone please guide me on how to fix this issue? Am I missing some configuration or styles? Any help would be greatly appreciated.
“fixed” it by setting padding-top: 20px on <ion-header> … if you’re using both mobile and web you can use Capacitor to check for the current platform and add or don’t a css class to the <ion-header> (in Vue you can do it with :class)