I’m having some really frustrating issues with overflowing content (only on iphones).
I have a case study page set up with a slider. I’ve switched overflow off in the body and it works perfectly on my Samsung S8.
However when we view on an iphone you can scroll all the way down to the bottom of the page, and keep scrolling! It’s super annoying and i can’t understand what’s going on.
Can someone pleasssseeee help with this. Here is a gif of there issue:
Hi
The problem is occuring because you have given an explicit height value to the body in tablet viewport, which is being cascaded down to mobile view.
Hi, @rich_jc_w! This is how iOS, iPadOS, watchOS, and macOS handle scrolling inside most browsers and documents. Elastic scrolling / rubber banding can be tweaked using the following code, but the results are inconsistent, and it doesn’t seem to work on iOS.
<style>
html, body {
overscroll-behavior: none;
}
</style>
You can put the snippet in the but it’s functionality is limited and doesn’t seem to work on iOS devices. This is Apple’s design choice and not something designers/developers have control over. This is a pretty common request, and there are some interesting discussions around the issue:
If your design is 100% the height of the viewport, setting the overflow to hidden on the body element will do the trick (because there won’t be anything to scroll). If that GIF was taken with the body’s overflow set to hidden, something else is likely up (any external scripts?).
Found it! Seems like you’re injecting custom code into the <head> which sets the overflow back to auto. Remove this custom code and it should work fine.
