iPhone X safe area has changed with iOS 13+

[aubrey-fowler]

I'm writing an app with cordova, Ionic v1, and AngularJS 1.5.3.

ionic info

Ionic:

   ionic (Ionic CLI) : 4.10.3 (C:\Users\User\node_modules\ionic)
   Ionic Framework   : ionic1 1.3.5
   @ionic/v1-toolkit : 1.0.22

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 8.1.0, ios 6.1.0, browser 5.0.4, windows 4.4.3
   Cordova Plugins       : cordova-plugin-ionic-webview 4.1.3, (and 17 other plugins)

System:

   Android SDK Tools : 26.1.1 (C:\Users\User\Documents\Android\sdk)
   NodeJS            : v10.21.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.14.4
   OS                : Windows 10
   

In the past the new iPhone X came out and I added some code to make adustments for the "safe area".

css

body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

html

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

It was working for me for a long time.

However, I noticed that with the iPhone X and XR with iOS 13.6 I'm having issues with the "safe area".

As I'm using cordova-ios 6.1.0 I'm using WkWebView only.

    <platform name="ios">
        <preference name="WKWebViewOnly" value="true" />

I'm finding that I have to multiply the safe-area-inset-bottom by 4 to make any progress.

$calculated_padding_bottom: calc(env(safe-area-inset-bottom) * 2);

body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) $calculated_padding_bottom env(safe-area-inset-left);
}

What could be wrong?

[breautek]

Does it specifically break in 13.6? (ie does it work in 13.5 simulator, but break in 13.6?)

If yes... then it sounds like an iOS introduced bug and I would suggest also reporting this issue to Apple.

[aubrey-fowler]

@breautek How would I submit a bug with Apple?

I tested this on iOS 12 and I got the same problem. It's when I add attachments. So I have an ionic page and I add a list item it seems to push the "safe area" and footer button down. It's persistent as well even when I leave the page and come back there is a problem.

[aubrey-fowler]

I added this code in my css file:

body {
    padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

It seemed to help with part of the problem but not all of it.

Before and after.

However, the issue with the footer button being pushed down persists on iOS 13 even with iPhone 8 Plus and iPhone X.

[alitalaee]

I had the same issue and fixed after 4 hours

global.scss file

body {
  margin-top: constant(safe-area-inset-top);
  margin-top: env(safe-area-inset-top);
}
ion-tab-bar {
  margin-bottom: calc(4px + env(safe-area-inset-top));
}

i did used safe-area-inset-top for margin-bottom to fixed this issue.

[soulwawa]

in the head section of your html

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">