Dynamically added position:fixed element is in the wrong place
Question
In an hybrid app we have at work we disable the scrolling when a dialog opens. This is something that used to work perfect, until iOS 10.3 came around.
The case:
The disabling of the scroll happens when a user clicks a button. An overlay is shown with some content. To remove it they either tap the close button or the overlay. Nothing specials.
The way we disable the scrolling is by setting the following code: (I have removed the eye candy to keep it readable. 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%;
}
Reproduce the issue:
Scroll down until you see the "Toggle freeze" button. Press it when it is somewhere in the middle of the screen. You will notice that the header will be positioned somewhere on the screen, but not on top. Notice that although it seems to be at the bottom, selecting of the "Header" text can still be done at it's original top position.
Click the green background or header to unfreeze the page.
This issue only happens once. The second time the header will be painted correctly.
If you scroll further until the button reaches the top of the page, the painting of the header will also be correct.
This only occurs on iOS 10.3, all other versions work fine.
1 answers
solution1
1 ACCPTED 2017-05-03 06:10:14
Webkit已修复此错误： https ： //trac.webkit.org/changeset/216104/webkit
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.