[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?
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.
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.
