Ionic Cordova - iOS 12 和 13 将页脚按钮推到安全区域之外

Question

我有一个用 Ionic v1、Cordova 和 AngularJS 1.5.3 编写的应用程序。

我遇到的问题根本不会出现在 Android 设备上。

iPhones 测试：iPhone SE、iPhone 8、iPhone X 和 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.

随着iOS版本的增加，好像效果越来越好

我的代码在做什么：

我的页面供用户输入缺席，他们可以选择添加照片附件。附件将作为离子项目添加到我的离子列表中。

我有一个离子视图和一个带有按钮的页脚。当我将一个离子项目添加到我的离子列表时，它似乎将页脚按钮向下推出“安全区域”并且它会永久地这样做。

即使我转到另一个页面并再次返回，问题仍然存在。它似乎还会永久影响我应用程序不同页面上的“安全区域”。

问题： 随着附件列表的增长，它会将页脚按钮向下推出安全区域

如何在最新版本的 iOS 上将我的按钮放在页脚中？

代码片段：

<ion-view left-buttons="leftButtons" cache-view="false" right-buttons="rightButtons">

    <ion-nav-buttons side="right">
        <button menu-toggle="right" class="button button-icon icon ion-home" ui-sref="main.home"
            automation-id="RIGHT_NAV_HOME_BUTTON">
        </button>
    </ion-nav-buttons>

    <ion-content class="has-header has-footer bg-stable" padding="false">

        <ion-list can-swipe="true">

            <div class="item title-bar">
                <h2 class="dark" ng-i18next="BOOK_ABSENCE"></h2>
            </div>

            <div class="item item-icon-left" ng-click="setDate('startDate')">
                <i class="icon ion-ios-calendar-outline"></i>
                <span ng-i18next="START_DATE"></span>
                <span class="item-note">{{ data.startDate | dateFormat }}</span>
            </div>

            <div class="item item-icon-left" ng-click="setDate('endDate')">
                <i class="icon ion-ios-calendar"></i>
                <span ng-i18next="END_DATE"></span>
                <span class="item-note">{{ data.endDate | dateFormat }}</span>
                <i class="icon ion-ios-arrow-right"></i>
            </div>

            <div class="item item-divider"></div>

            <label class="item item-input">
                <textarea placeholder="Comments" ng-model="data.comments" rows="4"></textarea>
            </label>

            <div class="item item-divider"></div>

            <ion-item class="flex-container-center" ng-repeat="attachment in attachments">
                <div class="flex-item-1">
                    <img ng-src="data:{{ attachment.mediaTypeField }};base64,{{ attachment.imageDataField }}">
                </div>
                <div class="flex-item-big">
                    <div>{{ attachment.filename }}</div>
                </div>
            </ion-item>

        </ion-list>

    </ion-content>

    <div class="bar bar-footer no-padding bg-bottom">
        <div class="button-bar">
            <button class="button button-positive" ng-click="book()">
                <span ng-i18next="SAVE"></span>
            </button>
        </div>
    </div>

</ion-view>

环境：

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

以前，新的iPhoneX出来了，我加了一些代码，对“安全区”做了调整。

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

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

因为我使用的是 cordova-ios 6.1.0，所以我只使用 WkWebView。

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

Answer 1

事实证明，env() 计算仅在应用首次加载时才可靠。当我们打开相机小部件时，我们在技术上离开了应用程序，当我们回来时，env() 被再次计算，它给出了一个我们不想要的值。

为了解决这个问题，我将顶部填充设置为零。

body {
    padding: 0 constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); //iOS 11.2
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

我们已经在 HTML 中设置了视口覆盖物，所以我们在安全区域方面做得很好。

Ionic Cordova - iOS 12 和 13 将页脚按钮推到安全区域之外

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

iphone

ios

cordova

ionic-framework

ios13