3

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

案子：

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

我们禁用滚动的方式是通过设置以下代码：（我已经删除了眼睛糖果以保持可读性。一个完整的例子可以在这里找到）

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

重现问题：

向下滚动，直到看到“切换冻结”按钮。当它位于屏幕中间的某个位置时按下它。您会注意到标题将位于屏幕上的某个位置，但不在顶部。请注意，尽管它似乎位于底部，但仍然可以在其原始顶部位置选择“标题”文本。

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

这个问题只发生一次。第二次将正确绘制标题。

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

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

4

1 回答 1

1

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

于 2017-05-03T06:10:14.033 回答