The Problem:
I want the body element on iOS 13 Safari to not scroll. This means no scrolling, and no elastic bounce (overflow-scrolling) effect.
I have two elements next to each other on which I have set overflow: scroll;
, those should scroll, just the body around them shouldn't.
All the solutions I've tried just don't work in progressive webapps that have the following tag inside their head and are saved to the homescreen.
<meta name="apple-mobile-web-app-capable" content="yes">
Solutions I've tried:
setting overflow hidden on body and/or HTML. Didn't work for iOS 13 safari: https://stackoverflow.com/a/18037511
html { position: relative; overflow: hidden; height: 100%; } body { position: relative; overflow: hidden; height: 100%; }
does nothing in iOS 13 Safari but works in macOS Safari and Firefox.
setting position fixed on the body. Doesn't work for me because when the user scrolls, the body doesn't but the scrolling still prevents my two inner elements from scrolling while the overflow-bounce is animating: https://stackoverflow.com/a/47874599
body { position: fixed; }
only puts the body over the scrolling of the page. The scrolling (overflow-scrolling) happens through the fixed body.
preventing the default on touch moved. Didn't work (is an older solution...): https://stackoverflow.com/a/49853392
document.addEventListener("touchmove", function (e) { e.preventDefault(); }, { passive: false });
does nothing as I can tell. Not in Safari nor in Firefox.
preventing the default on scrolling of the window and setting the scroll position back to 0. Is not viable because of buggy animations.
window.addEventListener("scroll", (e) => { e.preventDefault(); window.scrollTo(0, 0); });
sets the scroll position back to 0 but the overflow-scrolling still applies which ends up in a buggy behaviour.
A snippet that demonstrates it:
To test it yourself, save the snippet below as an HTML file, and save it to the home screen on an iPad (or iPad simulator). The body suddenly becomes scrollable when saved to the home screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<style>
body, html {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
}
nav, footer {
width: 100%;
height: 5rem;
background: blue;
flex-shrink: 0;
}
main {
display: flex;
height: 0;
flex-grow: 1;
padding: 2rem;
}
section {
width: 50%;
overflow: scroll;
display: flex;
flex-direction: column;
align-items: center;
}
div {
flex-shrink: 0;
width: 25%;
height: 18rem;
margin: 1rem;
background: red;
}
</style>
<nav></nav>
<main>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</main>
<footer></footer>
</body>
</html>
None of them worked in an acceptable way for me. How do I do this so it works properly in iOS 13 Mobile Safari (when saved as a PWA to the home screen)?
html { position: relative; overflow: hidden; height: 90vh; }
– Cheston