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%;
}

重现问题：

向下滚动，直至看到＆＃34; Toggle freeze＆＃34;按钮。当它位于屏幕中间的某个位置时按它。您会注意到标题将位于屏幕上的某个位置，但不会位于顶部。请注意，虽然它似乎位于底部，但选择＆＃34; Header＆＃34;文字仍然可以在原来的最高位置完成。

单击绿色背景或标题以解冻页面。

此问题只发生过一次。第二次正确绘制标题。

如果进一步滚动直到按钮到达页面顶部，标题的绘制也将是正确的。

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

Answer 1

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

动态添加位置：固定元素位于错误的位置

1 个答案: