Really messy behaviour when using <ion-tabs>?

_EDIT: it weirds, the preview in my phone browser is different from in my Mac Safari and Chrome, in my phone Chrome if I put the ion-tabs outside of ion-content, it looks okay I guess, but it looks messy if I put ion-tabs inside ion-content

EDIT 2: In my Mac Safari/ Browser, if I load the page through ion-nav-view, this messy behaviour shows up but its okay if I open this through my phone browser.

I put the ion-tabs after some standard HTML element inside ion-content but ion-tabs cover 1 element above it, in the pictures, the first is without the ion-tabs added and in the second is after I add ion-tabs, the input is blocked by ion-tabs, it seems like ion-tabs doesn’t care about element above it, if I added additional element above ion-tabs, ion-tabs would cover them too.

Also I have tried putting ion-tabs outside of ion-content but it shows nothing at all ( the page with ion-tabs is loaded through ion-nav-view).

The code with the tab is in home.html, I’m using ionic 2.2

https://pastebin.com/xcHWe2xH

Hi, I resolved this issue my self, the problem is if we used both has-header and has-footer in ion-nav-view, ion-tabs wouldn’t be rendered… omg… I spent 1 whole day to resolved this issue and I believe that more problem will come in the future if I use Ionic