Search bar in header is not vertically centered on iOS

Ionic Framework Ionic Angular
1

Using Ionic version 5.6.14, with this template code:

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-searchbar type="text" color="light"
                       placeholder="Search for titles or users ..." clearInput>
        </ion-searchbar>
    </ion-toolbar>
</ion-header>

it looks just perfect on Android - the search bar and the menu button are perfectly vertically aligned at the center of the header’s toolbar.

But on iOS, both the menu button and the ion-searchbar are not vertically centered in the header but instead appear flush against the top of the screen, is this a bug?

Regardless, has anyone found a workaround for this by any chance?

Thanks!

2

I believe the most recent release version is 5.6.14. Are you using the v6 beta?

3

Please accept the apologies for my mistake! I did an ionic --version but that was the CLI version… my library version from package.json is indeed 5.6.14 - will edit to reflect that now.

[ should also add that I see this behavior when running in a browser, not on a real phone, and have the dev-tools open - any of the iPhone models of the dev-tools seem to have this issue. I have not tested on an apk app or with a real phone, I just see this behavior in dev-tools of a desktop browser and assumed that this would show up on any cell phone that targets the same web page in a cell phone browser. ]

4

FYI, was going to open a bug for this but noticed there is one open already