ionic-team / ionic-team/cordova-plugin-ionic-webview
Ionic Cordova - iOS 12 and 13 pushing footer buttons beyond safe area
- Dominant language
- Objective-C
- Stars
- 493
- Forks
- 410
- PR merge metrics
- No merged PRs in 30d
Description
I have an app written in Ionic v1, Cordova, and AngularJS 1.5.3.
The problem that I have does not occur on Android devices at all.
iPhones tested on: iPhone SE, iPhone 8, iPhone X, and iPhone XR.
For iOS 13.6 the problem occurs on: iPhone SE, iPhone 8, iPhone X, and iPhone XR.
iPhone X, and iPhone XR ( completely pushes the buttons out of view )
```
For iOS 12 the problem occurs on:
iPhone XR - somewhat occurs
iPhone 8 - does not occur
iPhone SE - does not occur
iPhone X - somewhat occurs
For iOS 11:
it does not occur on iPhone 8. There are no problems.
iPhone SE - no problems
It somewhat occurs on the iPhone X.
iPhone XR does not run iOS 11.
As the version of iOS increases, it seems to have more of an effect.
```
What my code is doing:
My page is for the user to enter an absence and they have the option of adding photo attachments. The attachment is just going to be added as an ion-item in my ion-list.
I have an ionic view and a footer with a button in it. When I add an ionic item to my ionic list, it seems to push the footer button down out of the "safe area" and it does so permanently.
Even if I go to a different page and come back again the problem persists. It also seems to permanently affect the "safe area" on the different pages of my app.
Problem: As the attachment list grows, it pushes the footer button down out of the safe area
**How can I keep my button in my footer in place on the latest versions of iOS?**

**Code snippet:**
```
```
**Environment:**
```
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 adjustments for the "safe area".
**css**
```
body {
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); //iOS 11.2
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
```
**html**
``
As I'm using cordova-ios 6.1.0 I'm using WkWebView only.
```
```
Contributor guide
Assessment
This issue has not been assessed yet.