在我们工作的混合应用程序中，我们在对话框打开时禁用滚动。在 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%;
}
重现问题:
向下滚动直到看到“切换卡住”按钮。当它位于屏幕中间某处时按下它。您会注意到标题将位于屏幕上的某个位置，而不是顶部。请注意，虽然它看起来位于底部，但仍然可以在其原始顶部位置选择“标题”文本。
单击绿色背景或标题以解冻页面。
这个问题只会发生一次。第二次标题将被正确绘制。
如果您进一步滚动直到按钮到达页面顶部，标题的绘制也会正确。
这只发生在 iOS 10.3 上，所有其他版本都可以正常工作。
最佳答案
此错误已由 Webkit 修复:https://trac.webkit.org/changeset/216104/webkit
关于javascript - 动态添加位置 :fixed element is in the wrong place，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43093642/