Ion Footer overlaps with some android devices

I have launched my app to production and for most of the users, it doesn’t have any problem, actually for iOS works fine. But my problem is that for some devices, I have been reported that the footer overlaps with the navigation bar (Oppo A82 and Vivo Y33). I attach here a screenshot.

Do you what can be happening? In my emulators, everything goes well, the problem are the real devices. I am using capacitor v7.0, angular 17.0 and ionic 7.1.1.

Inside the constructor of app.component I’m using:
this.platform.ready().then(() => {
if(this.platform.is(‘android’)) {
StatusBar.setOverlaysWebView({ overlay: false });
}
this.initializeApp();
});

In global.scss I have:
ion-content {
padding-bottom: env(safe-area-inset-bottom);
}

ion-footer {
padding-bottom: env(safe-area-inset-bottom);
}

And my footer has:
<ion-footer [translucent]=“true” slot=“fixed”> …

And as you can see here, the emulator works fine:

Does someone knows anything about this problem? I tried to search but found nothing. Thanks anyway.

Thank you very much! Because I’m more into web development, I wasn’t aware about SDK 35 changes, that was very clear and I appreciate you took your time to help me, thanks!!! I’ll try the solution but it seems to be the solution.

1 Like