There is a known technique to disable page scroll when modal window is opened.
CSS:
html {
height: 100%;
}
body.disable-scroll {
position: fixed;
height: 100%;
overflow: hidden;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
</head>
<body class="disable-scroll">
<div class="page-content">
<input type="text">
... content ...
</div>
</body>
</html>
But on IOS Safari scroll becomes enabled after virtual keyboard is opened. And it scrolls more than even window.innerHeight + window.scrollX. Some blank gap appears at bottom of the page. 
Editor's url
https://codesandbox.io/s/condescending-snow-skuo5?fontsize=14
Fullscreen url to check on IPhone
https://skuo5.codesandbox.io/
Just open on IPhone or in XCode with IOS 12+ try to scroll and then focus on Input and try to scroll again.
from IOS Safari: unwanted scroll when keyboard is opened and body scroll is disabled
No comments:
Post a Comment