位置：固定在Safari / IOS中消失。

Question

在Safari / iOS中遇到一个奇怪的问题。我有以下代码。

HTML：

.content {
    border: 1px solid orange;
    overflow-x: hidden;
    position: relative;
    z-index: 0;
}

.footer {
    background: pink;
    width: 100%;
    position: fixed;
    bottom: 0;
}

CSS：

position: fixed

工作示例：

http://run.plnkr.co/ZgGFJgMf0atvbiyC/

情景：

我有一个页脚div位于视口底部.content。这是整个页面内容的包装器div的子元素。

问题：

以上在Chrome中运行良好。但是，在Safari（和iOS）中，请注意页脚无法看到。它就在那里......但是父div并不像视口一样高，所以无法看到页脚。

从{{1}} div中删除以下任何一个修复了以下内容：overflow-x，position，z-index。

为什么？

对于这个例子，当然，简单的解决方法是简单地删除这些属性，但问题是我正在调试一个包含大约1000行HTML和30k + CSS行的现有站点。是的，有点乱。但这就是我所拥有的。在没有完全理解这个问题的情况下，我有点犹豫是否删除其中一种风格。