Ionic-framework: iOS 11 状态栏与标题重叠

我还尝试按照这些说明（https://github.com/ionic-team/cordova-plugin-ionic-webview#installation-instructions）使用 WkWebView，但这并没有解决问题。

我也尝试使用 Ionic Package 并在设备上安装，也没有奏效。

你好！ 感谢您向我们提出问题！

除了在我的 Mac 上本地构建而不是使用 IonicPro 之外，我尝试了您的步骤来重现，并且它运行良好。 因此，这可能是 Ionic Pro 的问题。

为了排除我生成的内容与您拥有的内容之间的差异，您是否可以将示例应用程序上传到 GitHub 以便我查看？

感谢您使用 Ionic

这是源代码： teststatusbar.zip （我排除了平台、插件和 www，这是您需要的吗？）

这应该无关紧要，但确切地说，我使用了ionic start myApp sidemenu而不是ionic start myApp tabs

那会工作得很好。 谢谢。 我会让你知道我的测试结果如何。

你的代码看起来不错。 拥有应有的一切，等等。

在我的 Mac 本地构建并在 SE 模拟器上运行看起来不错：

这可能是 Ionic Pro 的问题。 让我检查一下。

我能够通过以下方式复制这个问题：

1. ionic start test-sidemenu sidemenu
2. 当被要求链接到 Ionic Pro 帐户时
3. 在我的 Mac 本地构建并安装在我的手机上，一切都很好
4. 推送到 Ionic Pro，等待构建，在 Ionic View 中查看，获取状态栏拥挤问题

分配给View的维护者看看。

我遇到了同样的事情，我相信这些行是罪魁祸首。 https://github.com/ionic-team/ionic/blob/33960f1a5a98fc49525cfccc85f0847bf3a02de5/src/platform/cordova.scss#L48 -L50

在 safari 中调试并看到了这一点。

@tcigrand不确定您在哪里看到的，但是您使用的是 app-scripts 3.0.0 吗？ 在 3.0.1 中修复了一个隐藏的错误，其中--prod构建正在剥离一些 CSS：错误修复。

我在 2.1.4 上，但更新到 3.0.1 似乎并没有解决它。

我在 safari 开发工具中看到了在使用 iOS11 调试在 iPhone 8 Plus 上运行的应用程序时。

在main.css我得到以下几行。

.ios ion-menu > .menu-inner > ion-header > .toolbar.statusbar-padding:first-child {
  padding-top: calc(20px + 4px);
  padding-top: calc(constant(safe-area-inset-top) + 4px);
  padding-top: calc(env(safe-area-inset-top) + 4px);
  min-height: calc(44px + 20px);
  min-height: calc(44px + constant(safe-area-inset-top));
  min-height: calc(44px + env(safe-area-inset-top));
}

我的想法是 safari 看到多个padding-top和min-height属性，然后它使用最后一个。 对于非 iPhoneX 设备，我们希望使用padding-top: calc(20px + 4px);和min-height: calc(44px + 20px); 。 对于 iPhoneX，我们希望将规则与safe-area-inset-top 。

@tcigrand您可能走在正确的轨道上。

https://www.quirksmode.org/blog/archives/2017/10/safeareainset_v.html说：

[..] 在非 iPhone X 的 iOS11 设备上，safe-area-inset 为 0。

https://webkit.org/blog/7929/designing-websites-for-iphone-x/说：

对于不支持 env() 的浏览器，包含它的样式规则将被忽略

两种可能的解释：

• 由于您的代码示例显示calc(env(safe-area-inset-top) + 4px); ，因此可以解析为 '4px' 并且可能这仍然被不支持 env() 的浏览器解释。
• env() 被跳过，但 constant() 仍然被解释（也从 https://github.com/ionic-team/ionic/issues/13294#issuecomment-340918487 判断）

我不是在 Mac 上开发，现在无法验证。

——

再说一次，它仍然可能是 Ionic Package 的问题，因为https://github.com/ionic-team/ionic/issues/13294#issuecomment -340812401 没有本地构建的问题。

我能够访问 Mac 并确认@tcigrand通过检查员发现了什么。

在装有 iOS 10 的 iPhone 5 上，它看起来像这样：

在装有 iOS 11 的 iPhone SE 上，它看起来像这样：

如您所见，带有 iOS 11 的 iPhone SE 使用带有 constant() 的规则，其中 safe-area-inset-top 的值为 0。

这可能应该在更多的离子样式表中修复，在离子源中搜索constant(safe-area-inset-top)返回 9 个结果。

我正在标记@mhartington以介绍这些 css 行:)

暂时这是一个丑陋的解决方法： https :

确保您的应用程序中有viewport-fit=cover 。

在非 iPhone X 的 iOS11 设备上，safe-area-inset 为 0。

是不是真的正确。 当您引入正确的 viewport-fit 属性时，它将使视口占据整个屏幕空间。 但是，只要您这样做，安全区域就会启动并提供正确的值。

演示在这里

以及应用的 css 规则

由于您的代码示例显示 calc(env(safe-area-inset-top) + 4px);，这可能会解析为“4px”，并且可能这仍会被不支持 env() 的浏览器解释。
env() 被跳过，但是 constant() 仍然被解释（同样从 #13294 (comment) 判断）

env和constant都用作常量，仅适用于 iOS 11.0，但对于即将推出的 iOS11.1，函数已更改为env ，因此我们现在需要两者。

viewport-fit=cover存在于所提供示例代码的元标记中，因此必须进行其他操作。 你是只在 iOS 11.1（昨天刚刚发布）还是 11.0.3 上测试？

我一直在测试已发布的每个 iOS 11 版本以及 ios10。

@marcovwout你能提供一个有同样问题的 git repo 吗？ 有很详细的说明吗？ 我怎样才能重新创建？

@mhartington我的源代码在这里提交https://github.com/ionic-team/ionic/issues/13294#issuecomment -340811372 并且@kensodemann仅在离子视图中复制它： https :

总结到目前为止的上述经验，该问题仍然可能仅存在于 Ionic View / Ionic Package 中，而不存在于进行最新的本地构建时。

我错过了viewport-fit=cover ，添加它解决了这个问题。 谢谢您的帮助！ 抱歉把这个问题弄乱了。

我已经使用 viewport-fit=cover 进行了测试并得到了相同的结果......在设备上运行时，状态栏填充消失了。

为了重现，我只是开始空白的离子项目并在模拟器和设备上运行它，没有任何改变。

Xcode 8.3.3，运行 iOS 10.3 的模拟器和运行 iOS 11.0.3 的设备。
对于刚刚使用的构建“ionic cordova build ios”。

`
cli 包：（/usr/local/lib/node_modules）

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

全局包：

cordova (Cordova CLI) : 7.0.1

本地包：

@ionic/app-scripts : 3.0.1
Cordova Platforms  : ios 4.4.0
Ionic Framework    : ionic-angular 3.8.0

系统：

Android SDK Tools : 26.0.2
ios-sim           : 6.0.0 
Node              : v8.1.3
npm               : 5.3.0 
OS                : macOS Sierra
Xcode             : Xcode 8.3.3 Build version 8E3004b

杂项：

backend : pro

`

@LuizTokuhara我根本无法复制这个。 你是通过 Ionic View 还是ionic cordova run ios部署到设备上

你能把它推到github上让我看看吗？

@mhartington
我刚刚开始了一个 ionic blank 项目，制作了一个“ionic cordova build ios”，在 Xcode 中打开该项目并构建了一个 Adhoc 以在设备上进行测试。

嗯，这正是我试图复制的。 你能跑吗

ionic cordova plugin ls

cordova-plugin-device 1.1.4 "Device" cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview" cordova-plugin-splashscreen 4.0.3 "Splashscreen" cordova-plugin-whitelist 1.3.1 "Whitelist" ionic-plugin-keyboard 2.2.1 "Keyboard"

也许我需要升级一些东西？

对我来说：

> cordova plugin ls
cordova-plugin-app-event 1.2.1 "Application Events"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-health 1.0.2 "Cordova Health"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-sqlite-storage 2.0.4 "Cordova sqlite storage plugin"
de.appplant.cordova.plugin.local-notification 0.8.5 "LocalNotification"
ionic-plugin-keyboard 2.2.1 "Keyboard"

@mhartington
我这里做的ios build已经上传了，不知道你能不能测试一下，看看有没有和你的build不一样的地方。
iOS 构建

不过，我这边看起来还不错😞

哦，这很奇怪……
让我安装最新的 Xcode，看看它是否有任何改变。

@mhartington
好的，升级到最新的 Xcode 后，状态栏填充运行正常！！！
也许与 Xcode 8 有一些兼容性，因为它没有最新的 iOS 和 iPhone X 支持？

除此之外，我还遇到了https://github.com/ionic-team/ionic/issues/13294#issuecomment -340847517 中描述的内容。

如果我在本地构建并部署到设备，一切都很好。
如果我通过 Ionic View（或使用 Ionic 构建服务获取 .ipk），状态栏和标题重叠。

所以总而言之，Ionic Pro 的库开发工具已经过时了。 可以请 Ionic Pro 的人确认他们正在修复它吗？或者，我们现在必须在本地机器上构建。

我不认为问题仅在 Ionic Pro 中，因为我确实有这个问题并且根本没有使用它。

我在生产版本 (--prod) 上看到了这个问题，但在使用 Xcode9 构建时不会出现其他问题。 使用运行命令或构建后跟 Xcode（这是我用来上传到存储的）。 离子版本 3.8.0 和离子 CLI 3.15.2。 在运行 11 的设备上报告后在运行 iOS10.3 的设备上进行测试。

来自 index.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">

我想在这一点上我涵盖了所有内容，对吗？

您使用的是哪个版本的@ionic/app-scripts ？

@marioestradarosa - 您是否在Ionic Pro 支持门户上记录了有关此的问题？ 我不知道 Ionic Pro 团队是否会积极监控这个 GitHub 存储库，但他们会监控。

@kensodemann谢谢，那是我错过的。 仍然有 3.0.0 而不是 3.0.1。

@kensodemann我上周五在这里提交了一份与此问题相关的报告。

@marcovwout - 太棒了！ 谢谢。

+1
正在经历同样的问题。 还没有找到解决方案。

+1
星期五是我的应用程序 Oo 的截止日期

同样的问题，我使用的是 app-scripts 3.0.1

只需在 config.xml 中设置

       <platform name="ios">
               <preference name="StatusBarOverlaysWebView" value="false" />
       </platform>

或者使用状态栏插件

       this.statusBar.overlaysWebView(false);

嘿大家！ 终于可以重现这个了。 它混合了 Pro 上的旧 xcode 版本和较新的 iOS 更新。 我们将就更新事宜与您联系。 坚持住！

@mhartington 有任何更新吗？

@mhartington我

我正在使用此解决方法直到修复： https :

@marcovwout非常感谢。 我读了一些评论说这对他们不起作用。 我回家后肯定会尝试这个

我有同样的问题，我的来源是 viewport-fit = cover

@yemenifree的解决方案对我

谢谢，在更新 ionic-cli 后遇到了这个问题。

有趣的是，使用 viewport-fit=cover 效果很好，除非你碰巧从一个 ionic 页面转到一个 modal 到另一个页面。 然后最后的页面填充消失了。 为了解决这个问题，我需要使用this.statusBar.overlaysWebView(false); @yemenifree建议

仅供参考，对我来说，config.xml 建议在运行 ionic cordova prepare 时不起作用，它从 config.xml 中删除
<platform name="ios"> <preference name="StatusBarOverlaysWebView" value="false" /> </platform>

此问题有任何更新吗？

对我来说，这还不够content="viewport-fit=cover, ..." 。
所以我在我的应用程序启动时也添加了这个：
this.statusBar.overlaysWebView(false);

我在我的 iPhone 上测试了它，一切看起来都很棒。
但是，发布到 App Store 后，应用程序在启动时崩溃！！！

只是想让大家知道引入此修复程序可能存在问题......

我有一个类似的问题，我正在使用 PhoneGap Build 服务。 这是我必须做的来解决这个问题。

更新您的 ionic 项目的 index.html 中的以下行。 您可以看到我在元标记中添加了gap://ready file: 。

<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *;img-src 'self' data: *">

使用以下首选项更新 config.xml 文件以使其适用于 iOS 11。iOS 10 不需要：
<platform name="ios"> <preference name="StatusBarOverlaysWebView" value="false" /> </platform>

感谢您回复@dmgfjaved！ config.xml 中的平台设置对我有用。 想知道为什么在 angular 代码中做同样的事情时它不起作用......
我还想分享我的应用程序在调试时遇到的问题，但在发布到应用程序商店时却没有，这归结为 XCode 版本。 我在测试期间使用了版本 9，但是当我尝试发布该应用程序时遇到了问题。 “解决方案”是将 XCode 降级到版本 8，这样就改变了应用程序的编译。

我们仍然可以使用最新的 Ionic 3.9.2 和 XCode 版本 8 重现这个问题。是否有任何修复即将到来，或者我们必须尝试自己修复它？

我有同样的问题
我有viewport-fit=cover ，在真实设备上有不同的结果

iPhone 7, ios 11.2 -> OK
iPhone 8, ios 11.2 -> Not OK

使用
@ionic/app-scripts: "3.0.0",
ionic: "3.13.0",

嘿大家！ 感谢您对这一问题的持续耐心和反馈。 只是想告诉你们一些关于我们在 Ionic Pro 方面修复这个问题的最新进展：

1) iOS 的 Ionic View 最近有一个新的原生版本（你必须通过 App Store 更新），它修复了在 View 中签出内容时的标题问题。

2）我们正在积极致力于在 Ionic Package 方面修复这个问题，这是我们的第一要务，它比平时更多地参与，因为我们同时添加了一个新功能，所以我们不会通过修复旧项目来破坏旧项目漏洞：

3) 当 Ionic Package 的修复到来时，您将能够选择 XCode 8 或 XCode 9，这样您就可以完全控制我们用来构建您的应用程序的内容。 随着时间的推移，我们将继续增加可用设置和版本的库。

我们希望尽快发布，感谢您的理解！

谢谢，
马特

PS 我对 Pro 端的了解比本地框架端要多得多，如果在本地构建（不使用 Package）时出现问题，我建议升级到 XCode 9。

谢谢@matthewkremer - 我可以确认从 xCode 8.3.3 更新到 9 解决了我的问题，即当为运行 iOS 11.2 的 iPhone 6 本地构建应用程序时，未应用状态栏填充。

现在应该为所有 Pro 客户解决这个问题。

使用最新的 Ionic Native (4.5.2) 和最新的应用程序脚本 (3.1.7) 仍然存在此问题

$ ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.7
    Cordova Platforms  : android 6.2.3 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    ios-sim    : 6.0.0 
    Node       : v6.11.4
    npm        : 5.5.1 
    OS         : OS X El Capitan
    Xcode      : Xcode 8.2.1 Build version 8C1002 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

@jzwcars您必须使用 Xcode 9 进行构建（也许应该在此问题之外的某处记录）

不幸的是，我无法使用 xcode 9 构建我的应用程序，因为我的 imac 太旧了，我无法将其更新到 sierra。 没有 sierra 没有 xcode 9 :-(

@nicolasborn在这种情况下，您可以使用 Ionic Pro 构建服务在线构建。 或使用此解决方法： https :

@marcovwout ：Ionic Pro 太贵了。 这是一个私人的无偿项目。 我正在使用该解决方法，并希望它也适用于 iPhone x。

@marcovwout该问题在使用 Xcode 9 时已“修复”。

然而，由于操作系统/硬件限制，或者仅仅是因为使用 Xcode 9 编译引入了一大堆新问题（例如，关于自动签名、推送消息...... .) 因此，如果仍然支持 Xcode 8.x，我们将非常感激。

这似乎是一个很小的 ​​CSS / 布局问题，但它使我们很多人的开发生活变得更加困难。

在标题@ ios 10.3 硬件（iphone 5s，iphone7plus）中仍然有额外的空间，
但在 iphone 模拟器中没有额外的空间。

`cli 包：（/usr/local/lib/node_modules）

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

全局包：

cordova (Cordova CLI) : 7.1.0

本地包：

@ionic/app-scripts : 3.1.6
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

系统：

ios-deploy : 1.9.2 
Node       : v9.3.0
npm        : 5.6.0 
OS         : macOS Sierra
Xcode      : Xcode 9.0 Build version 9A235 `

@sonicwong请打开一个新问题，将示例应用程序上传到 github。

我花了整个下午调试状态栏，发现我没有取消对 index.html 中的以下行的注释。

<!-- cordova.js required for cordova apps (remove if not needed) -->
<!--<script src="cordova.js"></script>-->

我最初是用 ionic 开发 PWA。 我开始将我的 PWA 迁移到应用程序然后面临这个问题。

仍然有这个问题，但有趣的是，当我聚焦输入时，它似乎会自行纠正。 有没有其他人看过这个？

在这一点上，我不确定要尝试什么。 我添加了视口标签，尝试了 StatusBarOverlaysWebView 的 JS 和配置版本，甚至从头开始重新配置我的整个项目。 有任何想法吗？

还是这个问题。 我已经尝试添加this.statusBar.overlaysWebView(false);并且还在config.xml ，我有content="viewport-fit=cover并且我将我的 Xcode 更新为Version 9.3 (9E145)

cli 包：（/usr/local/lib/node_modules）

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

全局包：

cordova (Cordova CLI) : 8.0.0

本地包：

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

系统：

Android SDK Tools : 26.1.1
Node              : v8.9.4
npm               : 5.6.0 
OS                : macOS High Sierra

插件：

cordova-plugin-device 1.1.7 "Device"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-file-opener2 2.0.19 "File Opener2"
cordova-plugin-fullscreen 1.1.0 "cordova-plugin-fullscreen"
cordova-plugin-inappbrowser 2.0.2 "InAppBrowser"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.1.0 "Splashscreen"
cordova-plugin-statusbar 2.4.1 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 2.2.0 "Cordova sqlite storage plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"

我发现在使用 os10.3 的 iOS 硬件中存在大小错误。 将操作系统升级到 11.x 后一切正常。 （模拟器没有错误）

有没有关于为 xcode 8 修复它的消息？

@mhartington我终于重现了这个问题，当你在模式中导航一个新页面时会发生这种情况，请检查这个https://github.com/ionic-team/ionic/issues/14401

我也遇到过这个问题。 对我来说，当我运行ionic cordova run ios它运行良好，但是，在使用 XCode 9 进行部署时，我遇到了重叠。

我发现在我的项目中，我选中了“需要全屏”设置。 见图片。

取消选中此设置并使用 XCode 进行另一个构建后，问题已解决。 希望这可以帮助。

这篇文章可能会有所帮助
https://ayogo.com/blog/ios11-viewport/

我也遇到过这个问题，在应用statusBar.overlaysWebView(false); ，问题已得到解决。

感谢您的问题！ 此问题已被锁定，以防止发表与原始问题无关的评论。 如果使用最新版本的 Ionic 仍然存在问题，请创建一个新问题并确保模板已完整填写。