Ion tabs off screen when using slot="bottom"

[imaginecreative]

I am having an issue with the tabs bar not showing on a device when using slot=“bottom”. If I switch the slot to top everything shows without any problems.

I have tried using ionic serve and everything works as expected. The tabs page and children do not have any extra code or CSS and I have removed the global styles to check that nothing is accidentally interfering with it.

Here is my tabs page Html:

<ion-tabs>

    <ion-tab-bar slot="bottom" color="primary">
        <ion-tab-button tab="reasons">
            <ion-icon name="home"></ion-icon>
            <ion-label>Reasons2</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="reasons-user">
            <ion-icon name="apps"></ion-icon>
            <ion-label>Favourites</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="reasons-upload">
            <ion-icon name="settings"></ion-icon>
            <ion-label>Upload</ion-label>
        </ion-tab-button>
    </ion-tab-bar>

</ion-tabs>

My idea is that it’s somehow being pushed off the bottom of the screen as slot=“top” is working fine, but maybe I’m missing something else?

Update:

I tried adding the above tabs code directly to the three tabs content pages and this does display when on a device. However, the highlighting and click effects do not work.

I then tried adding the code to the tabs page and tabs content pages at the same time. This resulted in one tab bar showing when on a device, but when viewed using chrome://inspect/#devices I see both of the tab bars.

[gog1withme]

I am facing the same issue in version 6, I tried so many things but it is still a blocker for us. It will be great to hear from those who had made it work.