Ion-toolbar height issue on iOS

[Edit: I’ve discovered the problem. It was not an Ionic issue at all, but related to another element that my app had placed at the top of the page, above the ion-header.]

I am having an issue that ion-toolbar is too tall on iOS. Here is a screenshot of how the toolbar displays on iOS (on the left), versus in a browser (on the right). (I have added a border around the ion-toolbar to make it clear. My sense is that an additional height equal to the ion-safe-area-top is being added to the header (because on devices that have large top areas, this gap becomes even bigger). Has anyone else encountered this problem? Suggestions?

1 Like

What device are u testing that on?

Actual phones, it has been checked on iPhone 8 and iPhone 12 mini, and it exhibits the behavior. It also shows up in the Xcode simulator for all the devices I have tried. The screenshot is from a simulated iPhone 8.

Does this happen for you in a blank new starter project as well?

Thanks for the reminder, @EinfachHans. That’s the question I should have been asking myself. The behavior is different in the starter project. (If there is a spacing issue at all, it is more subtle.) I need to investigate further.

It was not an Ionic issue, but something I had done to the layout of my app. Thanks for your help, and sorry for the distraction.

1 Like