Android navigation bar overlapping webview

Ionic Framework
1

I have an ionic app using ionic tabs stick to the bottom of the screen.
Everything works fine except on some Android phones having navigation bar at the bottom.
The navigation bar is overlapping some parts of the screen and the tabs not showing at all!
Not sure how to fix this issue. Please let me know if you have any idea.
Thanks in advance.

image

2

Hi, I am facing the same issue can, were you able to fix it?

3

I saw the same problem on Android 13 devices. Turned out that cordova-plugin-statusbar was causing it. After removing that plugin, content was no longer extended below navigation bar.

4

I do have that plugin but without that plug to it’s overlapping.

5

I have the same issue on Android 13. I don’t use cordova-plugin-statusbar. Anyone found a fix for this yet?

It works fine on Android 12.

Update: My issue is with android:windowTranslucentStatus option. For some reason, enabling translucent status bar also makes the navigation bar to overlap the content as well.

1 Like
6

@butaminas It may happen because of the statusBar from import { StatusBar } from '@capacitor/status-bar'

Here for a full explanation