iOS 8 上的棘轮模态错误答案

【问题标题】：Ratchet Modal bug on iOS 8iOS 8 上的棘轮模态错误
【发布时间】：2014-09-29 19:31:26
【问题描述】：

我在商店中有一个使用Ratchet 框架构建的应用程序。它曾经运行良好，直到 iOS 8 发布。现在，当我在 iOS 8 上对其进行测试时，不会出现模态框的标题栏。当我单击时，栏上的所有控件（如 Close、Back 按钮）都可以工作，但栏及其上的控件不可见。这仅在 iOS 8 上发生，在 iOS 7 及更早版本上运行良好。

要重现此错误，请在 iOS 8 设备或模拟器上的 Safari 中打开此示例应用 http://goratchet.com/examples/app-android-notes，然后单击 New note 按钮以打开模式。

我在 Safari 的网络检查器中调试它时注意到，如果我将模式的栏 <header>...</header> 元素移动到其他地方，然后将其恢复到原来的位置，它就会出现。或者有时，将其display 属性从block 更改为none，然后再改回block 有效。或者有时如果我滚动页面。

任何解决方案都将受到高度赞赏

【问题讨论】：

标签： ios twitter-bootstrap css ios8 ratchet

【解决方案1】：

似乎 Safari 中的 position: fixed 存在问题，如此 SO 问题中所述：Mobile safari position:fixed z-index glitch when scrolling

您可以通过将此规则添加到您的 CSS 来修复它

header.bar.bar-nav {
  -webkit-transform: translateZ(0);
}

您可以在 Ratchet 的 Github 存储库中跟踪问题 - https://github.com/twbs/ratchet/issues/679

【讨论】：

【解决方案2】：

你应该试试position:sticky;。它是为处理 Safari 上的position 而设计的。 fixed 多年来一直是移动设备的问题。我认为它已修复，但 iOs8 也有奇怪的行为......

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

【讨论】：