Bug with Tabs Starter Project in Android

1

Hello Ionic Team,
I have just started a new tabs project through the ionic cli, i am working on android.
I have found two bugs. one, i could fix, but the other one i couldn’t.
The first bug, is that the tabs in android , which are placed on the top, have no margin between the icon to the top, and the icon needs to be pushed down 2 px. i fixed it with this code:

.tab-item .icon {
display: block;
margin: 0 auto;
height: 32px;
font-size: 32px;
margin-top: 2px;
}

now the 2nd bug, when viewing the first tab, the shadow under the tabs is great, but when pressing another tab, the shadow gets kind of multiplied, or there is an added grey border on the bottom of the tabs. if you than press again the home tab you will notice that it goes back to looking good.

When checking inside regular chrome browser on desktop, i can see that the first tab’s navbar has a thinner shadow and border, and all the other tabs have a much deeper shadow and border. so maybe it is somehow connected to the navbar and not specificaly the tabs element…

Is there any way to fix this also perhaps?

Thanks for your time,
Shaul.

2

Ok , i found the answer to this, for anyone who needs it.
The additional border comes from the fact that the other tabs except home, have a list item straight in the beggining of the page, and its top border gets under the bottom border of the tabs.

All you need to do is put the content a bit lower and you will be fine.