Android system ui overlaps our ionic app html content, very frustrating

We’re a team of two who’s been working with ionic for a while now.
Most things has been going smoothly until a recent discovery. One of us bought a new Android phone and deployed the app to his device like usual.
I’ve appended pictures for easier understanding:


One of the pictures is how the app looks in chrome using “ionic serve”
The next picture is showing the same app deployed to two different devices. The one on the left is using android 4.4.2 and is a brand new Huawei Honor 6, the one on the right is a Samsung galaxy s3 using android 4.1.2.
I marked the differences with red lines.
As you can see the system ui navigation bar overlaps the menu tabs in the apps, which itself overlaps some of the “statistics” html content.

Any kind of help in this situation will be of great value to us, thanks.

Forgot to add:
We are using the crosswalk plugin.

1 Like

Just out of interest, care to share your how you made those progress circles? They look very snazzy!

I believe they’re from this github angular-progress-arc.
They fill with animation and feels really smooth actually!

it must be something to do with the onscreen bottom buttons vs hardware bottom buttons. maybe crosswalk doesn’t recognize this so doesn’t account for that being there?

have you tried without crosswalk?

Thanks - they do look good!

It worked differently without crosswalk. It’s then possible to scroll the “outer” content, by other means you are able to scroll down so you can see the full nav tabs in south, doing this hides half of the nav header (you’re scrolling down so only half the “dashboard” text is visible etc). Seems to be some kind of weird scaling behaviour.
We noticed though by starting a new tabs template project and filling it with random that the app behaves as should both with and without crosswalk. Starting to get the feeling that it’s something wrong with the css/html. Weird that it works perfectly on older phones and in browser though…

Hi,

i am facing the same problem. Something new or found a workaround for this issue ?

I found another thread with a suggested solution (modifying StatusBar):