mobile safari overflow scroll not working

Instantly share code, notes, and snippets.

nicolaskopp / ios-fixed-scrolling-fix.css

• Download ZIP
• Star 25 You must be signed in to star a gist
• Fork 7 You must be signed in to fork a gist
• Embed Embed this gist in your website.
• Share Copy sharable link for this gist.
• Clone via HTTPS Clone using the web URL.
• Learn more about clone URLs
• Save nicolaskopp/637aa4e20c66fe41a6ea2a0773935f6e to your computer and use it in GitHub Desktop.

steida commented Jan 1, 2023

Isn't https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/ a fix?

Sorry, something went wrong.

Offirmo commented Nov 1, 2023

Hi from 2023!

@steida Yes, using lvw, lvh is the fix at the moment

HOWEVER there is another bug:

• when pinned on iPhone (PWA / "pin to home screen")
• when requesting fullscreen (meta viewport-fit=cover, webmanifest "display": "fullscreen")

body's position must NOT be "fixed", or it strangely crops to the small viewport! (seen 2023/11 iOs 16.6.1 iPhone 14) (strangely it works with position: absolute but that's not the same)

The solution is

• ensure root element (:root, html) has no padding, no margin, no border
• ensure body has height 100 lvh

zigavidmar commented Jan 17, 2024

If you are still experiencing this issue and the above hasn't helped check if you have a "position: relative" on the body or html tag and remove it . This was the issue scrolling was broken on safari mobile for me.

luishdez commented Feb 7, 2024 • edited

@zigavidmar yes! it's happening to me as well. And apparently it gets worse with multiple relative parents or horizontal scrolling.

I tried with an empty page and it was fine ( not feeling native.. ) , once you add more depth it gets worse. And the elastic control that allows you to move to another tabs etc makes a lot of conflicts.

BTW: little bit of topic but related. Framer motion has same problem with child animations that mix px and % or relative units. Animations doesn't work , but they work fine after the dragStart event it's triggered. The webkit renders properly.

I forgot. There is another actor in the issue. The touch algo. That analyze and predicts your intent. A huge scroll area usually works fine...

Momentum Scrolling on iOS Overflow Elements

Web pages on iOS by default have a “momentum” style scrolling where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping as if friction is slowing it down. Like if you were to push a hockey puck across the ice or something. You might think that any element with scrolling would have this behavior as well, but it doesn’t. You can add it back with a special property.

Hey Chris, Is there a way to prevent the momentum scrolling on desktop (using a magic mouse or trackpad) as well as on iOS? I have been searching for a long time, but without luck.

Hey David, you can implement a scroll debouncer that can limit to only 1 scroll event being run every few milliseconds. Thing is, it will be far from perfect and in several cases may feel pretty unnatural.

Perhaps I’ll write a simple tutorial for this.

Why would you ever want to do that? That’d be the most annoying thing.

You could check for touch events with modernizr or something like it, and then only apply the rule in certain cases.

Checking for touch events is unreliable. Too many false positives and even at Modernizr they don’t recommend it.

Hey, you could try to use @media feature to see the size of your screen and if it is so small then the code works, but if it is bigger than x value it will not work, for example:

That will only apply to a screen size max of 768px. That’s the simplest way, and it is how many websites do it

if i use -webkit-overflow-scrolling:touch, when page are scrolling, i tap a button to reset the container of scrollTop = 0 , in ios or android, it can stop scrolling but it can’t go to the top of container

Hi this seemed to work really well until Feb 2019 – when there seems to be some rendering issues – anyone else encountered this?

Chris, momentum scrolling doesn’t seem work inside an iframe. I’ve tried several settings, I’ve also tried to iframe in the demo,

http://playground.johanbrook.com/css/touchtest.html

But it doesn’t produce scrollbars 99% of the time. Looking into a hack.

Chandra, did you find a solution to touch scrolling on iframes? I’m getting mad after the same problem…

Yeah, it doesn’t work on iframes. If you wrap the iframe in a container and put the -webkit-overflow-scrolling: touch and overflow-y: scroll on that, it should work. See this Codepen .

Kristie, thanks for the codepen example – it totally solved our problem!

Thanks this works perfectly! Do you have anything to resolve the milisecond lag when clicking on a link on a touch device?

I’m currently using webkit-touch-scrolling to increase performance the performance of scrolling in iPad and iPhone web applications. It has significantly increased performance, but just like most applications that use a timeline like environment with images, the iPad runs out of memory when a lot of ’tiles’ have loaded.

Is there any way to track the scroll position when momentum scrolling? Much like the ‘touchmove’ and ‘scroll’ event? So far I have seen lot of no’s.

My current solution would be to set a variable when the user starts scrolling and set a setTimeout() to an X amount of milliseconds to ‘simulate’ the scroll function.

This is just a little side note, the reason you run out of memory is because apple will only allow you to have 10 mb of ram with web applications. Why would they let you create native like applications on the web? If you could, there would be no reason to pay to be in their app store. We need to hold them accountable.

Had the same problem as you, iOS safari crashing. I debugged this for over a day, because I was sure the memory crash was due to hundreds of Angular hg-repeat elements(empty ones, which loads images upon scroll position).

The funny thing is, when debugging this in iOS Simulator, it doesn’t occur! Another funny fact is that I went from a menu with position:fixed, because the menu pops down when a input field is activated(rendering halts upon window resize), but at the same time changing the input field to a select field which doesn’t pull up the keyboard. So all i all, I just implemented a bug which wasn’t even needed, argh!

For others that might search for this, I will include that the browser crashed upon invoking $location.hash(id) and $anchoScroll().

I tested your demo on Windows Phone (IE10) and both divs. scrolled kinetically.

This is only an issue with iOS. Both Android and WP behave properly without the use of ridiculous proprietary styles.

Exactly what I needed, Chris!

And I think you might be from the future , because you always seem to foresee what I’m going to need next. Very appreciated, man!

So incredibly helpful. Thank you! I was wondering how I managed to accidentally disable the momentum scroll.

Thanks! So relieved CSS fixes this!

Every time I try this style out, some of the content on some of my pages just disappears –– has anyone else had this problem? The elements that disappear still take up space (so it’s not like they’re display:none; ) I can see the content when I look in Chrome’s inspector window, and the yellow indicator points to where my content is supposed be, and it basically points to these invisible divs that have height:0px;

It’s definitely these “momentum scrolling” styles causing this. I’ve tried only deleting those styles, and my content comes back, but then goes poof when I add the them again.

Because I wanted the whole page to have the momentum scrolling, this is how I did my styles:

Any ideas what I might be doing wrong? Any thoughts much appreciated.

Oops – nevermind! Tried adding the style to html instead, worked like a charm. Duh

Yup, you got it right Annie: thanks! It works like a charm. :)

Hey! I sat next to you at the jQuery conference in San Diego! lol

Thank you Annie! I’ve fixed my issue! Change the -webkit-overflow-scrolling to none before to change overflow to hidden so I can prevent the disappearing :)

Thanks buddy!

I noticed that using overflow-y: auto; (from Chris’s example) also works. Tested in the native browser and Chrome of a Samsung tablet with Android 4.0.4 and also on iPad with iOS 6, Safari + Chrome.

overflow-y: auto; is working on all browser for me but not working on iPad. I am using following Style:

.m-scrollable-filter { overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }

pls give me any response.

Chris said in the article that overflow-y must be set to scroll for -webkit-overflow-scrolling: touch to work. So use this code instead (there’s no need for !important ):

Anyone have this associated issue and know how to prevent it (or what I’m doing wrong)?…

I have a div within a wrapper div which specifically allows horizontal scrolling but prevents vertical scrolling. Everything is fine except that on ipad it remains possible to vertically lift the entire div, which then bounces back on release. What is more annoying is that this then allows the same div to ‘drag’ diagonally with a diagonal swipe. Here’s the page in progress…

http://raewilkinson.scratchthesky.com/

I fixed this issue with javascript that prevents the default scroll-bounce behaviour in the vertical axis. It works but it’s not ideal. I still have no insight into how the entire div could become ‘dragable’ in every direction.

I had the other case where the content was scrollable in vertical direction. I had this style applied:

Even when there were no need for horisontal scroll, it behaved like if you drag horizontally it moves the content sideways and bounce back. I solved this by doing:

This cause momentum to be used only in y-direction, since momentum is disabled when setting overflow to auto.

You can set it the other way: overflow-y:auto to only use momentum in x-direction.

If I add this: overflow-y: scroll; /* has to be scroll, not auto */ -webkit-overflow-scrolling: touch; to the html, or body, or any major block of my website I get no scroll improvements and I cannot tap on the top bar to scroll to the top. Any idea why?

You don’t need to add it to html or body on your webpages; Apple uses momentum scrolling on all pages automatically. -webkit-overflow-scrolling: touch is just for scrolling other elements on the page (only being able to scroll, say, a p ). Also, touch scrolling gives no “scroll improvements” — it just lets you flick your finger to quickly get through something long.

Thank you very much for this, exactly what i needed for fixing the scrolling issue on ios.

Hey — Just thought id take a second to say THANK YOU for this … as much as it seems i should have already known about the -webkit property, had i not seen this i may very well have gone down a dark road trying to implement a javascript replacement for overflow-y … THANK YOU SINCERELY

Just a warning for folks out there finding this great feature – if you are using it in a rule that also includes overflow-x: hidden – beware. Because the -webkit-overflow-scrolling: touch property will allow the user to scroll vertically and horizontally , which may reveal hidden divs that are meant to be hidden to the left or right.

I am facing this exact problem. I loose the vertical momentum scrolling as soon as I add overflow-x: hidden to the html and body tag. Adding -webkit-overflow-scrolling: touch restores the vertical momentum scrolling but breaks my overflow-x: hidden . Is there a way to get away with both? I tried to place the two styles at different places, in the html tag only, in the body tag only, in a wrapper div, always with no luck.

I believe that now (Aug 2018) this is not an issue. I have a website that acts like a full-height app, using position: fixed for full height content blocks that transition into one another, and one of them has overflow-y: auto for when it overflows. I added the -webkit-overflow-scrolling: touch property, as well as the overflow-x: hidden to this block, and it seems to be fine. It definitely helped the scrolling issue we were experiencing in older IOS phones (iPhone 6), and we don’t notice any other side effects (although I’m not sure if I have any content that overflows the left and right). I’d also like to point out that this is working even with overflow-y: auto , despite the code example in this post mentioning it only works on scroll (perhaps now that it’s 2018, IOS has resolved these issues).

Does any one know how to add a auto scrolling function to a horizontal scroll bar???I have some images in a table row and i want that row to auto scroll horizontally but not manually.. Please help me

I have customize scroll using CSS3, its working fine in all browser but the overflow-x is not visible in iphone. Here is the code what I have done. http://codepen.io/anon/pen/aLwhq

works great on ipad, thanks for the tip.

Thank you, this fixed a problem I was having and now the iPhone page looks like it should!

Okay, so when I have overflow-y: scroll; and -webkit-overflow-scrolling: touch; it works fine in most cases… except on the DIV I actually need it.

It’s a fixed DIV. When I load the page in landscape, and there is enough content to need overflow it works, but if I then change the device orientation to portrait (where the content doesn’t need overflow) then back to landscape the DIV no longer scrolls at all!

Please reply on this comment to above comment so I get notifications :P (I wish there were a way to edit such preferences on here!)

Hi Charles, I am also having this same issue, have you got any solution for this?

This was a great find — worked as promised. The only side effect is that child elements with position: fixed now move with the parent’s scrolling, until the momentum stops, and then they snap back into their fixed positions.

Did you ever find a solution to this? I’m having the same issue with a position:fixed navigation header div positioned on the top.

I’m having a similar issue. Fixed child element in container that that has “-webkit-overflow-scroll” moves while scrolling, and in addition, it’s hidden (I think the latter issue is related to z-index being changed when “webkit-overflow-scroll” is applied.

I can confirm that overflow: auto; -webkit-overflow-scrolling: touch; Works if you don’t want to show scroll bars all the time. Thanks for the tip, Chris!

Thanks for the tip Chris; overflow: auto; -webkit-overflow-scrolling: touch; works fine for iPhone media query; but when I used it within media query for iPad (1,2), it was causing the iOS app that was loading the page through iframe, to crash.

It works great for me. But I have another problem. While creating custom scroll, I’m unable to get smooth scrolling. Did I miss something?

Saved my day! However why I would need to add this in the first place is beyond me

Saved my week !!!

Thanks Chris, just made my day too!

Bundle of thanks!

Dear your technique works for me. i was facing problem in scrolling on touch devices, then i give your code to“`

body {overflow-y:scroll}

“` now my website scrolling smooth now.

Wow, that was a life saver.

Why in the world would you disable inertial scrolling by default? Who thought “This developer clearly wants this thing to be scrollable, but he probably wants it to be janky, so let’s make that the default.”?

why overscroll scroll?

Thanks for this, just saved me a few hours. Thanks also to the keywords that got me here.

Crazy how specific some of the controls can be.

Love it! Worked Thanks! :D

You just saved me hours of futzing around. Again. Thanks!

Thank you verry much! Keep on going with this good work, great article!

Words cannot express how grateful I am for this. Thank you!

I have a strange problem. I’ve tried looking everywhere and I can’t find any answers.

I’m using this CSS property ( -webkit-overflow-scrolling ) in an iOS app loaded inside a web view.

As soon as I open the app, it crashes and closes again. The crash report lead me to this page: http://bit.ly/1GobVK2 which suggests that it is caused by this CSS property. Is that legit? Should I continue to try and fix this based on this theory?

Has anyone else had similar issues with this CSS property?

just wanted to say, it actually does work with overflow: auto; , I have it set up and working on a few sites. Thank you for this snippet – don’t know why, but I keep forgetting this exact declaration and come back every time I need it again. ;)

This is really helpful. I was struggling for this issue and after applying -webkit-overflow-scrolling: touch; all the things stated moving smoothly. Thanks man for this :)

Hi, I’m a real tech dummy, so can you please help me and put it really simply like go to settings, go to x, then x, etc. my iPhone 5s screen keeps scrolling and it’s driving me nuts! The screen is clean, it’s a year old. I’ve tried turning it off and on again, no joy. How do I fix it? If it’s a memory thing should I delete some aps? Thanks! :-)

So yeah, didn’t read that it doesn’t work on “auto” and then tried it… Works on auto for me using Cordova on iOS so it might have changed, just a heads up.

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

There seems to be a warning on the page to not use ‘-webkit-overflow-scrolling’ on production facing sites.

Thank you! This worked perfectly!!

What a nice solution, it worked perfectly! Thanks!

Hi – when i use -webkit-overflow-scrolling on a div on ios 9+, cordova app it only activates scroll on 2 finger drag. any ideas on a work around?

I know that this is an old post, but…

“Web pages on iOS by default have a “momentum” style scrolling where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping as if friction is slowing it down. Like if you were to push a hockey puck across the ice or something”

…I believe this statement is actually false. Take any web page, including this very website, and scroll it in mobile Safari. It will not have inertia scrolling. Scrolling stops almost immediately when you lift your finger. Inertia scrolling at the page level isn’t a default at all.

Unless of course I am crazy and am the only person getting these results. Tested in iOS 7, 8 and 9, on 3 devices.

My finding is that you actually do have to use webkit-overflow at the document level. And because most sites don’t, they are seriously missing out.

Helped me a lot. I went from scrolling divs to scrolling page, so now it works on iOS. Has worked perfect on android from the beginning.

I love you!! just what I needed. you saved my app.

It seriously makes a world of difference to enable it, since it really isn’t a default. More info here:

https://ferdychristant.com/the-world-s-most-overlooked-web-optimization-for-ios-d88c7517d520#.r6pijsei7

This fix no longer seems to be working. – Is anybody experiencing the same issue? – Does anybody know how it could be fixed now?

Seems to be working on my iPhone SE, just not on my desktop Mac.

is there a way to make momentum scrolling work and hide the scrollbar permanently ? I tried using ::-webkit-scrollbar et all – looks like they are not compatible with -webkit-overflow-scrolling: touch;

Does anyone know how to get topbar and bottom bar for iphone to hide? In iOS 9 it is standard, but with this scrolling that standard disappears..

You saved me again. Thanks!

Try this it’s working for me

if (window.location == window.parent.location && navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { $(‘#orderpop’).attr(‘style’, ‘-webkit-overflow-scrolling: touch !important; overflow-y: scroll !important;’); }

What about other prefixes, -moz-, -khtml-, -o-, -ie-, or is this specifically for safari only? Does this need to be done for android too? What other prefixes would be needed for those?

Thid demo and in my project don’t work on iPad(MD329LL/a) with 7.0.4(11B554a)

Thank you for this. I had such a hard time even finding the right thing to call this that I almost gave up on it. Amazing how little it’s actually used in things like responsive menus. I’m even finding paid plugins and whatnot that don’t even use this.

It works fine for scrolling but lazy loading stopped working. After touchmove event the is still scrolling and unable to load the images. How to fix this?

This no longer requires overflow-y to be scroll – it can be set to auto and have the intended effect only once the content goes over the element’s bounds causing a scrollbar.

overflow-y: scroll; /* has to be scroll, not auto */

I could be mistaken, but I don’t think this is true? I have overflow-y: auto set and momentum scrolling seems to be working fine in iOS.

Some things are just that easy. After hours of debugging and searching i found this simple solution… and it even works in cordova/phonegap. Next time i visit this site first. Thank you. CSS-Tricks 4TW!

Works perfectly, thanks so much!

This worked and is much more pleasant BUT the container that was scrolling horizontally had elements with hover states that would activate when touched on iOS, now they do not respond to touch, so I will probably have to scrap the inertia scroll since the information displayed on hover is more important :(

I want Same scrolling Feature in android devices

Here postcss plugin https://npmjs.com/package/postcss-momentum-scrolling

Just to reiterate the sprinkled comments in here:

THIS BREAKS SCROLL NOTIFICATION

I appreciate the article as it does give inertial scrolling back, but a few developers in here (Jessie, Nishant, Charles) have noted that they no longer receive scroll events when this is turned on. This is imported for our application. We do get one event when inertial scrolling finally stops to exactly 0 but this does not help our use cases. We need events WHILE the scrolling is occuring, as we get when this is not in or as we get on other products with inertial scrolling. Jessie, thanks for the setTimeout and track solution. I will probably simulate it this way until we find another answer.

This fix no longer seems to be working. – Is anybody experiencing the same issue? – Does anybody know how it could be fixed now?

According to this it is no longer needed: https://ferdychristant.com/why-ios-11-is-great-news-for-the-web-345c43cc55db

Thanks for that tips it’s working really well ! But I have a problem, the scrollbar appear, while I put ‘ ::-webkit-scrollbar { display: none; }.

Can you help me to make it transparent, or customize it ?

Hi! Nice post, thx! There is a problem when using the animation on the page. Content when scrolling begins to “dance”. Has anyone encountered, tried to fix?

Great. This was useful to see. We use this in the credits within our game.

webkit-overflow-scrolling: auto not work on my iPad now.

“webkit-overflow-scrolling” no more works in ios 13 as ios 13 has by default enabled the momentum scrolling in any scrollable container but I do not want that behavior. Anyone have any idea how can I disable momentum scrolling on my webpage?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

Scrolling Issues on Safari/Chrome iOS

Hi, I'm having issues with scrolling on iOS (web). I have a web app that when you click on different pill shaped menus scrolls to the appropriate/related element on the page. When I click a different pill menu when scrolling is happening I get glitches on iOS browsers (safari/chrome) whereas everything is fine on Chrome Android. The wanted behavior is that when you click on the pill the scrolling goes to the needed item with no glitching or pause. I use jQuery's animate to scroll to the needed element and the scroll listener to detect whether the page is at the right position to illuminate the right pill (make it active).

Is there any advice/recommendations to fix this issue?

Accepted Reply

For anybody having this issue or unnatural scrolling behavior, this css line on your body or concerned div should fix it: -webkit-overflow-scrolling: touch

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

-webkit-overflow-scrolling

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.

Use "regular" scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen.

Use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. The speed and duration of the continued scrolling is proportional to how vigorous the scroll gesture was. Also creates a new stacking context.

Formal definition

Formal syntax, specifications.

Not part of any standard. Apple has a description in the Safari CSS Reference .

Browser compatibility

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• CSS-Tricks article with demo
• Smashing Magazine - describing the effect of scroll bouncing and how it works on different web browsers
• Safari 13 Release notes : Indicates the addition of support for one-finger accelerated scrolling to all frames and overflow:scroll elements, eliminating the need to set -webkit-overflow-scrolling: touch .

Kilian Valkhof

Building tools that make developers awesome., you want overflow: auto, not overflow: scroll.

Every now and then a web developer using a Mac discovers that their beautiful design is littered with scroll bars on other platforms. Either because someone points it out to them or because they attach a mouse to their mac which makes scroll bars appear.

Often, MacOS hiding scroll bars by default is blamed for this (I know I’ve done that in the past). But the actual culprit is developers using overflow: scroll when they mean overflow: auto .

The difference

It may seem natural to add overflow: scroll to anything you want to be scrollable, but what it actually says is always show a scroll bar .

In most situations however you probably only want to show a scroll bar if one is needed , and hide it when not (you know, like Mac). For that, you need overflow: auto , which lets a browser automatically determine if a scroll bar is needed — or not.

So in short: overflow: scroll : Always show a scroll bar. overflow: auto : Show a scroll bar when needed.

Spotting the issue

Disabled scroll bars are easy to spot on Windows and Linux, because you’ll have rather ugly inactive scroll bars visible on the page, for example here in the LinkedIn post creator:

A single scroll bar is not the worst that can happen. If add an image to a LinkedIn post, you’re shown not one but two inactive scroll bars next to each other.

Yep, if you have multiple elements with overflow:scroll, the scroll bars will just stack. Yikes.

Showing scroll bars on Mac

Windows and Linux always show you the scroll bars, but if you’re on Mac you have to change a setting to get them to show. Go to System Preferences, then General and toggle “Show scroll bars” to “Always”.

…but then you’re left with ugly scroll bars just like the rest of us, which you probably don’t want. There’s a reason Mac hides them!

Emulating scroll bars

What if it was easier to detect visible scroll bars without having them enabled across your operating system? I wrote a little bookmarklet that does just that.

It renders scroll bars on your page just like your Mac would if it’s set to always show scroll bars.

Emulate scroll bars on Mac Bookmarklets

Show all overflow: scroll scroll bars Show unneeded scroll bars

The bookmarklet comes in two versions: One shows scroll bars for all elements with overflow: scroll , and the other one only shows scroll bars when they’re not needed: elements that don’t scroll but still have overflow: scroll applied to them. Drag the bookmarklets to your bookmark bar to use them!

The scroll bars look 100% the same as the macOS scroll bars for horizontal, vertical and combined scroll bars, as well as supporting both dark and light mode so they’re a perfect representation of what you would see. This way you can quickly check a single page for scroll bars and move on.

The bookmarklet is available in Polypane as a debug tool.

Try it out on this page with the demo below:

If you’re on mac, this box will be empty until you click on one of the bookmarklets. (It already looks bad for us on Windows and Linux!)

The code in the bookmarklet loops over all elements on the page, checks their computedStyle and adds classes to an element where overflow, overflow-x or overflow-y have the value “scroll”.

Then it injects some CSS styling to match those classes for the scroll bars: there’s rendering for just the vertical scrollbar, just the horizontal scrollbar and the vertical and horizontal scrollbar combined, using the ::before and ::after pseudo-elements.

If you want to check out the code and play around with it I created this CodePen:

See the Pen overflow-scroll detection by Kilian Valkhof ( @Kilian ) on CodePen .

There are two refactors that I want to do awaiting browser support. Right now the styles are injected as a <style> element but I would prefer to use adoptedStylesheet , and I use window.getComputedStyle() but would prefer to use element.computedStyleMap() . Both of those are for now only available in Chromium.

There you go. An explanation of the difference between overflow: auto and overflow: scroll , a way to always show scroll bars on Mac and a bookmarklet to quickly check your page for hidden scrollbars.

Now lets rid the web of ugly disabled scroll bars!

Related but different: 100vw

A common cause of horizontal scroll bars on websites is the use of 100vw for the body or html element. This works fine on mac, where the scrollbar does not take up any space.

Unfortunately on other platforms it does and the way viewport width is described in the CSS specification means that 100vw includes the width of the scrollbar.

This means that on platforms with visible scroll bars, 100vw causes a horizontal scrollbar if there also is a vertical scrollbar.

The solution is fortunately easy: use 100% instead, which does not include the width of the scrollbar but still makes the element the full width.

Related Posts

There are many different ways to achieve the same layout in CSS and HTML. Some are now frowned upon, like tables or floats, and others tend to overlap somewhat, but have a clear specific purpose, like Flexbox and Grid. But CSS has another layout engine, and it’s one that has been part of CSS since […]

A rather geeky/technical weblog, est. 2001, by Bramus

Prevent overscroll/bounce in iOS MobileSafari and Chrome (CSS only)

UPDATE 2017.12 : For non-Safari browsers (e.g. Chrome, Firefox) you can use overscroll-behavior to solve exactly this. Simply apply overscroll-behavior-y: none; on html, body and be done with it.

Safari however does not support it …

UPDATE 2021.06 : The workaround below no longer seems to work in recent iOS/MobileSafari versions (iOS 12+) … 😭. Follow Webkit bug #176454 to stay up-to-date on support in Safari.

Know this bouncy overscrolling behaviour that browsers have been doing whenever you reach the “edge” of the page its contents?

Sometimes – in fullscreen apps for example – you’ll want to disable this. Now, there’s no need to resort to JavaScript and hijack touchstart , as the little CSS snippet below can prevent the rubber band scrolling:

Tested with iOS8, iOS9, and iOS10.

However, this snippet disables *all* scrolling on the body . If you want to retain scrolling on your page (but now without the overscroll effect) , you need to make use of a scrollable wrapper that spans the entire window/screen and which wraps around your entire content. Like so:

You’ll most likely want to remove the margin and padding from the body too in that case 😉

Note that your mileage may vary. Other pure CSS solutions do exist (untested though)

🔥 Like what you see? Want to stay in the loop? Here's how:

• Follow @bramus on Twitter
• Follow @bramus on Mastodon
• Follow @bramusblog on Twitter
• Follow bram.us using RSS

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997) , he fell in love with the web and has been tinkering with it ever since (more …) View more posts

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

30 Comments

Not good enough.

Don’t know what you’re talking about this worked fine for me

body, body {} what does it mean, is it a mistake

A mistake indeed. Should’ve been html, body

Worth pointing out that this prevents *any* scrolling when viewed in a browser.

That’s correct. I’ve updated the post to include instructions to using a scrollable wrapper around your content. That way overscroll on the body is prevented, but scrolling of the content is maintained.

Any way to make this work with a site that’s been “Added to Homescreen”?

I can’t seem to find anything :[

This should work fine for a PWA. At least on ios 13 it is working perfect

While this works fine for a web page in a browser, it doesn’t seem to help with a Cordova hybrid app.. When I run my app, it’s almost like the WebView component itself is scrolling as opposed to something within the “html” element. I confirmed this by selecting the “html” element in VS2015’s DOM Inspector and watching the location of the DOM highlight while scrolling.

All the solutions I’ve found end up disabling momentum scrolling completely, which results in another issue where iOS can’t scroll a page if the tap-drag starts on an “input” field.

So, does anybody know of a way to get around this?

Does anyone agree that iOS is absolute garbage for this!!

Now all my absolute elements bounce like hell :))

• Pingback: Customizing Pull-to-Refresh and Overflow Effects with CSS’ overscroll-behavior | Bram.us

thanks a lot. worked perfectly for me

thanks works perfect

i did following this guide but it still have bouncing effect when scrolling to bottom or top viewport ?

• Pingback: Scroll Bouncing On Your Websites - ugurak

this destroys the whole website you dumbass

Not if you know what you are doing … or if you’ve read the entire post …

Thanks, It worked perfectly for me on chat page:)

Because you didn’t give position relative to their father’s elements.

Best answer. it worked for me.

What if content is more than 100vh

• Pingback: 如果使用-webkit-overflow-scrolling，有时div滚动会冻结|ios问答

This works for me, but it creates some scrolling lag (in osx safari at least) sooo…no good 🙁

Thank you so much, it works as expected

This works but since the body is no larger than the screen size, the address bar will not minimise when scrolling down, not important for a lot of people but I’m working on a webapp and I realised this halfway through

It’s a shame we still need to fiddle with non-working workarounds for this in 2021. There is a standard CSS property out there, implemented by actually all other browser vendors but Apple simply refuses to adopt it…

I could not agree more.

Perhaps Apple deliberately keeps Safari in this state so that folks are forced to use Apps on their devices.

Although, Apple is adding support for overscroll-behavior in Safari 16 but this solution works for older Safari versions. Thanks!!!1

I will write my solution, I hope my method will help many people.

Css: html{ overscroll-behavior: none; } body { overflow-y: scroll; }

Leave a comment

Cancel reply.

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail. You can also subscribe without commenting.

This site uses Akismet to reduce spam. Learn how your comment data is processed .

Workaround for Mobile Safari scrollTop() not updating during scroll

Although I put in a great effort into researching all the topics I cover, mistakes can happen. Use of any information from my blog posts should be at own risk and I do not hold any liability towards any information misuse or damages caused by following any of my posts.

Overflow hidden + round corners not working on Safari

Apparently, it’s a bug on safari. Any workaround/code to fix this?

http://stefanias-first-project-e6faf1.webflow.io/issue-2

Here is my site Read-Only: LINK ( how to share your site Read-Only link )

Hi Stefania,

round corners don’t need overflow hidden most of the time (they don’t need it for bg images for example)

your link plays well in my Safari, look:

http://vincent.polenordstudio.fr/snap/issue_2_2018-09-21_15-01-03.png

Hey @stefania4

In Safari, everything also looks find for me until I hover over the element.

Are you able to share a read-only link?

Hi, @stefania4 !

This Safari bug is well known (don’t know why they didn’t fix it). Workaround you can find here: Safari not hiding overflow on rounded corner divs

thanks @sabanna , Now it’s working.

I used this as reference:

The issue is the combination of overflow , border-radius , and transition

This is the solution: On the element with overflow:

.transitionfix() { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0) }

added minus z-index value for image and higher value for the parent

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

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

🤖 Level up your chatbot knowledge with our latest AI course.

Join our free community Discord server here !

Learn React with us !

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here .

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Sunil Thammineni Mahendra Chinna

Overflow: hidden not working in ios safari..

I have a home page where there will be a popup modal that comes up on the page, and at lower viewports the content on the pop up will have overflow:auto, but at any viewport and device, the background page ( home page) should not be scrollable when the pop up is open, I have added overflow: hidden to the body when there is overlay open, overflow : hidden is working in all devices and browsers except in ipad/iphone safari versions. Researched a lot about this issue, but not able to find the correct solution.

can someone please help me ?

Jennifer Nordell

I don't know how accurate it is, but it might be something to try. I found on stack overflow a post that specifically says that iOS safari ignores overflow hidden when applied to body or html. They seem to be able to have worked around this by putting everything inside a wrapper div. Might give it a shot. Here's the reference. http://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers

Thanks for the reply! I have already looked into that post, but that did not work out.

Sunil Thammineni Mahendra Chinna if you find the answer, let us know. This is interesting and I'd love to know a solution :)

Well, I have tried a bunch of solutions but in vain, overflow: hidden with position: fixed is doing the job, but position: fixed will distort all the elements on the homepage. I saw few articles suggesting position: relative with overflow: hidden, but that doesn't work.

Still looking for a fix! is there any alternate for overflow:hidden ?

Corey Huddleston

As mentioned by Jennifer, Safari overlooks "overflow: hidden" when applied to HTML and BODY in CSS. You should target the element selector more directly in CSS, specifically the one that has the content that is overflowing, and use "overflow: hidden" on that element. In my testing Safari does not overlook that, and it fixed my issue.

Posting to the forum is only allowed for members with active accounts. Please sign in or sign up to post.

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Safari won’t scroll

Why is it that safari sometimes won’t scroll like it freezes .

iPhone 11, iOS 13

Posted on Apr 9, 2020 9:10 AM

Posted on Apr 12, 2020 9:47 AM

Try double clicking the Home button or swipe up from the bottom of the screen and swipe Safari upwards. Go to Settings/Safari and clear History and Website Data. Open Safari and test.

Safari - Clear the history and cookies on your iPhone, iPad, or iPod touch .    

Safari website data on your iPhone or iPad - How to clear .    

Do you have access to another WiFi network where you can try? That has worked for several people.

Try a restart.

Restart your iPhone, iPad, or iPod touch          

Try a forced restart.

Reset Device .      

If necessary

Hard reset .        

Do a backup and try a factory reset. Then restore from your backup.

Restore to Factory setting .      

Backup - Restore your device from an iCloud or iTunes backup .      

Similar questions

• Safari freezes after opening three or four pages Why is Safari freezing after I click on subsequent pages after opening a website 313 1
• Safari Is Not Working! Safari does not work. It always freezes. Problems arise when I open more than three tabs. I don't like other browsers but I'm tired of dealing with Safari's problems. I have to clear the past every day. Otherwise it definitely doesn't work. Why is this happening? Thanks. 183 4
• Safari freezing up while filling forms Sometimes, when I’m trying to either sign into a website, or sign up for one, safari won’t show me the keyboard. I wait about two minutes with no response. I end up having to quit safari by swiping up. How do I fix it? 492 2

Loading page content

Page content loaded

Apr 12, 2020 9:47 AM in response to kimo81

Apr 11, 2020 6:50 PM in response to kimo81

Hello kimo81,

It looks like no one has responded to your question. Here are a couple things that might help others answer your question:

• Is this happening on your Mac or iPhone?
• What specific software version is installed on this device?
• Do you have this issue in any other apps?
• Does this happen all the time or only on specific websites?

Please provide as many details as you can and thanks for using the Apple Support Communities!