Ionic UI components crashing on android devices

so I have implemented some of the pre-built ionic UI components, like ion-tabs and ion-segment, and they work fine when i run them in the browser, but the problem is that they don't work on android emulators nor on an android device connected via a USB cable. i mean you can see those elements and their content, but their design is just messy and completely not the same as the browser.

here's the code i have:

tabs.page.ts:

<ion-content>
<app-header></app-header>

<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home">
<ion-icon name="home"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="posts">
<ion-icon name="newspaper-outline"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="explore">
<ion-icon name="search"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="profile">
<ion-icon name="person"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>



signup.page.ts:

<ion-segment [(ngModel)]="signupData.role" name="role">
<ion-segment-button value="seeker" content-id="seeker">
<ion-label class="segment-design">
<ion-avatar>
<img src="assets/light-theme/seeker2.png" />
</ion-avatar>
</ion-label>
</ion-segment-button>
<ion-segment-button value="provider" content-id="provider">
<ion-label class="segment-design">
<ion-avatar>
<img src="assets/light-theme/provider2.png" />
</ion-avatar>
</ion-label>
</ion-segment-button>
</ion-segment>


// Here are some images of the layout on an android device vs in the browser (i hope those images show up correctly):


[1]: https://i.sstatic.net/pB7eIpif.jpg
[2]: https://i.sstatic.net/YjQXbMex.jpg



I think the issue isn't related to css as the design works as i want on the browser, unlike on android devices. Thanks in advance.

Continue reading...