Ion-Searchbar not showing on native Android device

When I run my angular (ionic) app on the browser everything works and looks fine. (Angular v17.0.2, Ionic v8.2.2).

When I npx cap sync it and try it out on a device with Android Studio it looks like the second image I added. There is nothing wrong with the z-index, I already checked that. The html and css is pretty simple, so I don't get what's wrong here.

<ion-row class="search">
<ion-col size="10">
<ion-searchbar #input (search)="searchJobs(input.value)" (keydown.enter)="searchJobs(input.value)" placeholder="Search For Jobs"></ion-searchbar>
</ion-col>
<ion-col size="2">
<ion-button mode="ios" class="ion-align-self-center" (click)="toggleModal()">
<ion-icon name="options"></ion-icon>
</ion-button>
</ion-col>
</ion-row>


CSS:

ion-row.search {
padding-right: 1.5vh;
align-items: center;

ion-searchbar {
display: flex;
height: 50px;
width: 100%; /* Ensure it takes full width */
--background: white;
--border-radius: 10px;
}
}


Browser: https://i.sstatic.net/BY1R2fzu.png

Android Studio: https://i.sstatic.net/BHRrHBJz.png

Continue reading...