How to stop the top of my app from overlapping with iOS' status bar?

Capacitor
1

By default, the top of my app overlaps with iOS’ status bar.

E.g. if I have a webapp that displays content on the webpage from the first pixel down (as most webpages do), then capacitor copies that into an iOS app UI that starts from the very top of the iPhone screen and down, which means the top ~50 pixels overlap uglily with the iOS status bar (battery, clock, data)

How can I make capacitor give some breathing room at the top of the screen to the iOS status bar?

Or what’s a good way solve this UI problem?

2

You are referring to “Safe Area” - Advanced Theming: Quickly Customize App Colors using CSS | Ionic

You can also take a look at GitHub - capacitor-community/safe-area: Capacitor Plugin that exposes the safe area insets from the native iOS/Android device to your web project.

1 Like
3

See also Designing Websites for iPhone X | WebKit

1 Like
4

I added ion-padding-top to all IonContent elements, <IonContent className="ion-padding-top">, but the capacitor app still overlaps the status bar. Do you know why that might be and how to fix it?

5

You usually want to use --ion-safe-area-top as mentioned in Advanced Theming: Quickly Customize App Colors using CSS | Ionic.

6

But I don’t know what the safe areas are in pixels, capacitor should know though right? Can I ask capacitor to set those variables for me?

7

For iOS, Ionic should be setting a value but you need to use the right components, like an ion-toolbar.

To accommodate this, Ionic automatically adds padding to certain components. For example, the first ion-toolbar component placed in an ion-modal will receive padding according to the top edge of the device’s safe area. This avoids the device’s notch covering up the header text.

For Android, it should be coming soon. There was a bug for years in the Chrome WebView that was finally fixed. See https://github.com/ionic-team/capacitor/issues/8121.

8

Should every view be an ion-modal in ionic? If only the ion-toolbar of an ion-modal gets the padding, it sounds like maybe it should be

9

No, that’s just an example. A toolbar is more commonly used within an ion-header.