Dynamically added position: the fixed element is in the wrong place
In the mashup we are working on, we disable scrolling when opening a dialog. This is what worked perfectly until iOS 10.3 arrived.
Happening:
Disabling scrolling occurs when the user presses the button. The overlay is displayed with some content. To remove it, they either press the close button or overlap. Nothing special.
The way to disable scrolling is to set the following code: (I removed the eye candy to make it readable. Full 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%;
}
To reproduce the problem:
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 title will be placed somewhere on the screen, but not on top. Note that although it appears to be at the bottom, the selection of the "Heading" text can be done at the original top position.
Click on the green background or header to unfreeze the page.
This problem occurs only once. The second time, the title will be colored correctly.
If you scroll down the page until the button reaches the top of the page, the header picture is correct as well.
This only happens in iOS 10.3, all other versions work fine.
source to share