ios - 如何防止固定到底部的 HTML 元素在 iPhoneX 上的 WKWebView 中滚动

Question

我正在使用 Turbolinks iOS 构建一个混合应用程序，大部分应用程序都在 WKWebView 中呈现。但是我的布局有问题。屏幕底部有一个固定的导航栏，除了 iPhoneX 以外的所有手机都可以正常使用。当用户在 iPhoneX 上向下滚动时，即使导航栏的位置固定在底部，它也会向上移动导航栏，而当用户向下滚动时，它会回到原来的位置。

nav-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0; 
  height: 0;
}

以下是其行为的示例：

我怎样才能完全防止底部栏移动？

PS。只是为了澄清我不认为这是我的 HTML 或 CSS 的问题，它在每个浏览器和其他 iPhone 上都可以正常工作。

Answer 1

我不知道 Turbolinks 是如何工作的，但是当“安全区域布局指南”未启用时，我只在 iPhone X 上遇到了类似的导航栏问题。

之后，您可以将约束设置为该安全区域而不是您的超级视图。

以下是 Apple 关于该主题的一些参考：https ://developer.apple.com/ios/update-apps-for-iphone-x/