iOS 15 is out and so is the new release of Safari that brings the ubiquitous pull-to-refresh. Like it or not, single-page apps don't like that too much.
Here's how to disable it on Chrome for iPhone:
Disable Chrome's pull-to-refresh on iPhone
Any idea how to do the same in Safari in iOS 15?
The CSS overscroll-behavior-y: contain has no effect.
Ths 2013 library called iNoBounce (https://github.com/lazd/iNoBounce) actually still does the trick pretty well on iOS 15.
Straightforward replication of the example in the documentation did disable the pull to refresh.
Very crude solution that worked for our use case is to set an overflow: hidden; to the body element, but then you need to have an overflowing container element for all the content, otherwise scroll is blocked.
<body>
<div id="container"> Content </div>
</body>
body {
overflow: hidden;
}
#container {
height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
In 2022, this works nicely for me:
body {
overflow: hidden;
}
I disabled this behaviour by setting the CSS property touch-action of the target element to none.
touch-action:none;
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
touch-action:none in the body then solved the issue –
Partain Here is the tricky part:
/* prevent pull-to-refresh for Safari 16+ */
@media screen and (pointer: coarse) {
@supports (-webkit-backdrop-filter: blur(1px)) and (overscroll-behavior-y: none) {
html {
min-height: 100.3%;
overscroll-behavior-y: none;
}
}
}
/* prevent pull-to-refresh for Safari 9~15 */
@media screen and (pointer: coarse) {
@supports (-webkit-backdrop-filter: blur(1px)) and (not (overscroll-behavior-y: none)) {
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0px;
max-height: 100%; /* or `height: calc(100% - 16px);` if body has default margin */
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/* in this case to disable pinch-zoom, set `touch-action: pan-x pan-y;` on `body` instead of `html` */
}
}
/* prevent pull-to-refresh for Chrome 63+ */
body{
overscroll-behavior-y: none;
}
B.T.W. To disable pinch-zoom, use CSS
/* prevent pinch-zoom for Chrome 36+, Safari 13+ */
html {
touch-action: pan-x pan-y;
min-height: 100%; /* prevent pinch-zoom at page bottom */
}
and JS
// prevent pinch-zoom for iOS Safari 9~12
if (window.GestureEvent && !('touchAction' in document.documentElement.style)) {
document.documentElement.addEventListener('gesturestart', (e)=>{e.preventDefault()}, {passive: false, capture:true});
}
and HTML
<!-- prevent pinch-zoom for Chrome / old Safari -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
iNoBounce works until you use a gesture with more than one finger. Let's say you pull down the web page with two fingers (for example), then you will get the refresh.
For now, the only approach that have worked for me (but it disables zoom, scroll and other touch functions) is use event.preventDefault() listening to "touchmove" with passive set to false.
I have applied:
html, body {
overscroll-behavior: none;
}
and it resolved the problem for the main container. In case you have also some other scrollable sub-sections then apply the same overscroll behavior on that + make sure you dont have full-height set on the element.
Ths 2013 library called iNoBounce (https://github.com/lazd/iNoBounce) actually still does the trick pretty well on iOS 15.
Straightforward replication of the example in the documentation did disable the pull to refresh.
© 2022 - 2024 — McMap. All rights reserved.