Tabs height cutted on ios 7.0.x

ionic-v1
1

Hello!

I´m having a nightmare trying to understand how to fix this, so I decided to ask for help.

My app is running ok on android, and also on ios 7.1.x, 8, and 9. But when installed on ios 7.0.4 the tabs on the bottom are being cutted. Let me show:

On all devices (except using ios 7.0.4 the tabs looks similar to this (example image)):

image

But on ios 7.0.4 it looks like this:

image

So, I found some references about ios7 on CDVViewController.m and CDVStatusBar.m.

My question is: I need to change something on this files, or this is something that I can solve using css or something?

PS: All ios 7.0.4, 7.1.x, 8 and 9 are running on the same device model: iPhone 4S (A1387). And the header looks the same, nothing different from the top, etc.

Any ideas?

Thanks in advance!

2

Answering my own question (if somebody have the same problem):

I edited the file:
www/lib/ionic/js/ionic.js
and commented the line with this content:
viewportProperties.height = DEVICE_HEIGHT;

on lines:
3890 (iPad section)
3817 (iPhone section)

Made the same thing on the file:
www/lib/ionic/js/ionic.bundle.js
on lines:
3897 (iPad section)
3924 (iPhone section)

This is the best solution? I dont´t know, but fixed my problem.

EDIT: to avoid the bottom tabs to appear when using the keyboard, this css is useful:

.keyboard-open .tabs{
  display:none;
}

.keyboard-open .has-tabs{
  bottom:0;
}