iPhone X safe area has changed with iOS 13+
- 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.
```
```

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