Overflow issues only on iphone?

Hello guys,

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:

com-optimize

Please see the links below:

https://somethingfamiliar.webflow.io/projects/valluga

https://preview.webflow.com/preview/somethingfamiliar?utm_medium=preview_link&utm_source=designer&utm_content=somethingfamiliar&preview=cca27db9eefc50ce2aaa7d366b6c8b37&pageId=5d5ac8368602db71779dea84&mode=preview

Cheers,
Rich


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.

You should remove it and try again. It should work fine then :slight_smile:

1 Like

Hey Keshav,

That’s really helpful, it’s seemed to work but I’m still having this issue:

Is there a way I can fix these to the tablet view screen without being able to scroll up and down?

Sorry to be a pain.

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>

and where should I put that, in the header code?

Done that so far and it doesn’t seem to be doing anything.

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:

https://www.google.com/search?q=ios+rubber+band+scroll+site:stackoverflow.com

Well can you explain why these guys have managed it and I can’t?

There must be a solution.

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. :+1:

Unfortunately it doesn’t work. Please see it’s still happening. Surely there is an answer out there?

What happens if you set the body height to 100vh?

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.