ionic-team / ionic-team/cordova-plugin-ionic-webview

Ionic Cordova - iOS 12 and 13 pushing footer buttons beyond safe area

Open
#604 3 comments 0 reactions 0 assignees View on GitHub
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?**

![pic](https://user-images.githubusercontent.com/1875260/89876306-6435ce00-dbb6-11ea-9e60-4e8f2520dde3.png)

**Code snippet:**

```









{{ data.startDate | dateFormat }}




{{ data.endDate | dateFormat }}








{{ attachment.filename }}


```

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.