apache / apache/cordova-ios

iPhone X safe area has changed with iOS 13+

Open
#964 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.2k
Forks
1k
Avg merge
12h 11m
Merged PRs (30d)
18

Description

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 (cordova-lib@8.1.1)
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

``

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.
```



```

![pic](https://user-images.githubusercontent.com/1875260/89556596-8e2f6f00-d809-11ea-9a97-666c2c42391f.png)

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?

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the safe-area behavior on an iPhone X or XR running iOS 13.6 with cordova-ios 6.1.0 and WKWebViewOnly enabled. Inspect the CSS using env(safe-area-inset-*) and the viewport meta tag; done means the layout respects the safe area without multiplying the bottom inset.

Written by the indexing model from the issue text.

Assessment

Tech stack
angularjs, css, ios, javascript
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.