动态添加的 position:fixed 元素位置错误

Question

在我们工作的混合应用程序中，我们在对话框打开时禁用滚动。在 iOS 10.3 出现之前，这曾经是完美的。

案例：

当用户单击按钮时，会禁用滚动。显示带有一些内容的叠加层。要删除它，他们可以点击关闭按钮或覆盖。没什么特别的。

我们禁用滚动的方法是通过设置以下代码：（为了保持可读性，我去掉了花哨的部分。A complete example can be found here）

HTML:

<body>
    <header onClick="unFreeze()">
        Header
    </header>

    <section></section>

    <section>
        <button onClick="freeze()">Toggle freeze</button>
    </section>

    <section></section>

    <section></section>

    <section></section>

    <section></section>

    <div class="backdrop" onClick="unFreeze()"></div>
</body>

Javascript:

function freeze() {
    var $body = document.querySelector('body');
    $body.style.top = (0 - window.pageYOffset) + 'px';
    $body.classList.add('body--freeze');
}

function unFreeze() {
    var $body = document.querySelector('body');
    var scrollTop = - parseInt($body.style.top);

    $body.style.top = '';
    window.scrollTo(0, scrollTop);

    $body.classList.remove('body--freeze');
}

CSS:

.body--freeze {
    background-color: hotpink;
    position: fixed;
    width: 100%;
}

.body--freeze header {
    position: fixed;
    top: 0;
}

.body--freeze .backdrop {
    visibility: visible;
}

header {
    height: 50px;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: visible;
    z-index: 51
}

section {
    height: 100vh;
}

.backdrop {
    bottom: 0;
    visibility: hidden;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
}

重现问题：

向下滚动直到看到 "Toggle freeze" 按钮。当它位于屏幕中间某处时按下它。您会注意到 header 将位于屏幕上的某个位置，而不是顶部。请注意，尽管它似乎位于底部，但仍然可以在其原始顶部位置选择 "Header" 文本。

点击绿色背景或header解冻页面。

这个问题只会出现一次。第二次 header 会正确绘制。

如果继续滚动直到按钮到达页面顶部，header 的绘制也会正确。

这只发生在 iOS 10.3，所有其他版本都可以正常工作。

Answer 1

此错误已由 Webkit 修复：https://trac.webkit.org/changeset/216104/webkit

动态添加的 position:fixed 元素位置错误

Dynamically added position:fixed element is in the wrong place

javascript

css

ios10.3