safari ios overflow hidden not working

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

Join our Live Session: Interview with a UX Designer! 💼 Register here!

Join our free community Discord server here !

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

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.

Overflow Content not loading on iOS safari

I have a horizontal scroller on my website and it’s producing a really weird behaviour where on iOS safari the content which is overflow:hidden doesn’t load even when it’s scrolled into view.

The design works as expected on a desktop/laptop

page which is not working: Gelato Messina Specials | Gelato Messina Australia

Here is my site Read-Only: https://preview.webflow.com/preview/messina-staging?utm_medium=preview_link&utm_source=dashboard&utm_content=messina-staging&preview=fa4f413a4edbcc900ad2f158b4c23af4&mode=preview

Simple Solution to Prevent Body Scrolling on iOS

Posted on 30 October 2019 , by Markus Oberlehner , in Development , tagged JavaScript

In my last article about building accessible popup overlays with Vue.js we used a simple technique to prevent scrolling in the background. I think that this little trick for preventing scrolling on the <body> element on all devices, including iOS 12 and below (finally, this was fixed in iOS 13 🎉) is worth taking a closer look.

Usually, we can use overflow: hidden on the <body> element to prevent scrolling. But unfortunately, that does not work on older versions of iOS.

In this article, we check out which possibilities we have to prevent scrolling in all browsers, including mobile devices like iPhones and Android-powered smartphones.

The most straightforward way for disabling scrolling on websites is to add overflow: hidden on the <body> tag. Depending on the situation, this might do the job well enough. If you don’t have to support older versions of iOS, you can stop reading here.

Another way of how to deal with this problem is to use the body-scroll-lock package. This is definitely the most bulletproof way how you can do this. But it comes with the downside of being a pretty complicated solution, which adds 1.1 kB to your final bundle.

Next, we take a look at a not very elegant but simple solution to this problem.

The simple solution for preventing scrolling on iOS

The final size this solution adds to our bundle is only 253 bytes, so significantly less than the body-scroll-lock package.

As you can see above, we use position: fixed in combination with storing the scroll position of the user so we can restore the scroll position after the fact.

There are certainly some downsides to this approach. If you change the size of the browser window while the scroll lock is active, for example, the scroll position does not get restored correctly.

Another thing we have to consider is that setting CSS styles on the body triggers painting in the browser. I don’t think this is a big deal in most cases. But if you need to lock and unlock scrolling very frequently (every couple seconds), this might hurt the frame rate of your application.

But the most critical caveat you have to keep in mind is that this approach changes certain styles on the <body> element. If you apply custom styles for overflow , position , top , or width , your styles might break when the scroll lock is enabled.

Furthermore, there might be some edge cases I didn’t think of, and the developers of body-scroll-lock have. But until this point, I got along pretty well using this approach on a couple of sites.

Like What You Read?

Follow me to get my latest articles.

Wrapping it up

It’s unfortunate that for a long time, only using overflow: hidden to prevent scrolling did not work on iOS. But with only 18 lines of JavaScript, we can work around the problem.

In the end, you must decide if it is even necessary in your case to support older versions of iOS. Luckily, iOS users usually do update very quickly.

Will Po, Body scroll lock — making it work with everything
WebKit Bugzilla,with overflow:hidden CSS is scrollable on iOS

Do you want to learn how to build advanced Vue.js applications?

Do you enjoy reading my blog?

You can buy me a ☕️ on Ko-fi!

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...

Preventing body scroll for modals in iOS

Tl;dr solution for 2020/ios 13+.

Thanks to the comments below (and that’s why I love comments so much), we can put a few things together to have a working CSS only solution for iOS 13+:

You can have a play with that here: https://codepen.io/benfrain/live/wvayeWq

I have left the rest of the post un-touched from 2016.

Original post from 2016 follows

Suppose you are building something that pops a modal window from time to time. This probably works well in most places, the problem is, on iOS, even if you toggle:

iOS doesn’t prevent users from scrolling past the modal if there is content that exceeds the viewport height, despite you adding that condition to the CSS. One solution is to write the window.innerHeight into both HTML and body elements in the DOM and then toggle the overflow: hidden style on and off on the body and html :

You can get a similar effect by setting the body and html to position: fixed when you expose the modal and ditch the JavaScript there.However, neither of those solutions prevents users from doing the ‘elastic band’ thing at the bottom; and that subsequently reveals an ugly space. It would be nice if we had something better. My esteemed colleague, Tom suggested making use of touchstart to prevent the default scroll behaviour and while that solved the initial problem (being able to scroll past the modal) it prevented clicks inside the modal. But it wasn’t long before that approach led us to using touchmove instead.

We can use it like this — at the same time that you invoke a function to make the attribute change or class change that shows the modal, you also do this:

And when you want to allow scrolling again, you fire it like this:

Behind the scenes we then need two functions:

The function receives either true or false and subsequently adds or removes an event listener. We then need a simple function reference that disables the default behaviour of the touchmove event.

You can view a basic demo of this technique here: http://benfrain.com/playground/modal-demo.html . You’ll need to do further work if your modal contains a scrolling section but for basic modals this seems to solve the issue quite nicely.

I’d like a simpler CSS solution but this is a pretty light-weight way to get the job done. I welcome a better approach if anyone knows one?

Learn to use CSS effectively, ' Enduring CSS ' is out now

Write and maintain large scale modular CSS and embrace modern tooling including PostCSS, Stylelint and Gulp

34 comments:

Could you share details about your implementation? How is the dialog positioned in CSS? Is there an overlay? Do you use the standard element and API (with polyfill, ofc)? I’ve found a few demos of dialogs, but neither of them prevent body scroll, so I’d be interested to see a demo that does prevent it.

Hi Šime, I added a demo link at the bottom now. Thanks, Ben

Šime, not using standard API.

This is all well and good until the modal content is taller than the device window height. It prevents the scrolling of content in the modal. I know there is an argument that there shouldn’t be that much content in a modal, but sometimes there just is.

I think this is a fantastic solution, but maybe needs a little more expansion to account for this. I’ll definitely keep an eye on this, it’s extremely useful.

Goddamn it, I completely missed the part AFTER the demo. Sorry Ben, feel free to delete my comment.

Hey, did you find a suitable solution? My modal works fine with a overflow, but it’s not scrolling with -webkit-overflow-scrolling: touch; The scrolling without -webkit… feals really laggy and is a dealbreaker to me.

It still jumps on double tab below the modal :(.

I wish you didn’t point that out, otherwise this would’ve been the ultimate solution to this annoying issue.

I ran into something similar about a year ago when I was prototyping to improve the UX of elements on iOS. You can check out my solution here: https://jsejcksn.github.io/material-number-select.js/

I did a similar approach once but added one more thing to prevent the jump to top (I was using jQuery), right before adding the overflow: hidden, I store the scrollTop, the after the overflow, I add the scrollTop to the body. var scrollAmount = $(‘body’).scrollTop(); $(‘body’).css(‘overflow’,’hidden’).scrollTop(scrollAmount);

I also banged my head on this for quite some time, and I tried a LOT not only to prevent scrolling of the content underneath, but also to enable scrolling on the modal at the same time. My solution involves intercepting the touchmove event and cancel it when the modal is scrolled to the top or bottom. But still I have found no way to prevent it when you tap into those “magic” areas on the very top and bottom of the screen … you can see it in action on http://nordmedia.de when using the mobile navigation (yes, thats a modal as well)

Hi Frank. This is an amazing solution. I am trying to do a similar thing with a modal that has a scrollable text div in it. Could you share the basic code & CSS that solves this issue! I tried using ‘position:fixed;overflow:hidden’ on the parent window, but it still scrolls underneath the modal.

Hey!! Thanks for the tip. Works for me…just a little modification to the original solution posted here. Great Thanks again!!

There is a typo in the link to the webkit.orG bug for Touch-action css property support.

I checked your demo and unfortunately it does not work on Chrome for Android. Yes the post is about Safari iOS , I understand, just thought it might be OK for other people coming here to find out why it does not work there. It does indeed work on FF for Android.

The reason for that is that Chrome treats touch event as passive by default (to increase scrolling speed and scrolling tap response), FF for Android does not do this. https://www.chromestatus.com/feature/5093566007214080

Also https://developers.google.com/web/updates/2017/01/scrolling-intervention points out that, like you write, touch-action: none should be used and where this does not work, also, like you write correctly, the old method of preventing the default action for the event should be used in older browsers and mobile Safari (nice how they write older browsers and mobile Safari in one sentence – hint), though Chrome discourages that and rightfully so.

On another note, when I checked your site on mobile, in particular the navigation menu, (not sure if this is intended) the body does scroll up and down upon touch scrolling. Not a major thing though.

What really caught my attention though is that when I tap the search bar on mobile (FF for Android and Chrome for Android) the soft keyboard slides **over** the search input. This leaves the user with no way of seeing what they type to search for.

A simple solution to that would be to place the search bar at the top of your navigation menu and possibly have the Twitter, GitHub and RSS links show next to each other on one line instead of in a list under each other. Like this all menu items and the search bar could still be seen and interacted with without issues.

Btw, the email given for this comment works 100%, so if you like to get in touch feel free to do so, happy to hear back from you. I also subscribed to this entry so I will receive any replies.

Thank you for your write up! Well done!

Now I am left with the dilemma of not wanting to spend hard cash on Apple hardware or BrowserStack (live view is slow apparently) to test my sites in mobile Safari and desktop Safari, just to be able to debug this type of error or, like again you write so well in your new post, the hostile menu bar of iOS Safari.

To my knowledge there is no way to debug mobile or desktop Safari other than BrowserStack like tools or actually having Apple hardware, right? Yes of course a rouge Mac iso in a VM could do, been down that road but it is tedious and keeping that up to date is even more tedious plus the EULA is not happy with it. WHY does Apple make it so HARD for devs to write clean and 100% working sites for their trouble child called Safari? Bad move trying to even monetize development for their platform(s)!! Grrr!

I say, instead of putting AI chips in their latest phones and pads Apple should really get their act together and clean up their mobile and desktop browsing experience called Safari so us devs and users don’t have a heap of issues to go through to deliver a site that otherwise works great in all other major mobile and desktop browsers. Sigh..

Based on the post and other articles found on the internet, I have created a javascript function to solve this problem. I have tested it on Safari and Chrome on iOS and Chrome on Android. You can find a test case here: https://codepen.io/thuijssoon/pen/prwNjO and a gist here: https://gist.github.com/thuijssoon/fd238517b487a45ce78d8f7ddfa7fee9 . Please let me know your thoughts.

I struggled with a similar problem for 3 days, and the solution I found may help someone. My app has two main divs. The main one is for displaying pages and the other has the navigation links.

The main div allows vertical scrolling for overflowing content: overflow-y: scroll. Some pages have vertically scrollable widgets that don’t well, or are completely unusable, unless scrolling is temporarily disabled on the main content div.

Setting ‘overflow: hidden’ in css via a class didn’t stop the content div from scrolling because it was overridden by ‘overflow: scroll’ applied to the div using an id selector. I could see that this was happening using the element view in the Opera debugger. So I tried putting ‘overflow: hidden’ directly on the content div using the style attribute and it worked. Content area became unscrollable and scrollable widget worked perfectly. So I wrote a bit of javascript that wrote the css into the content div on touchstart and removed it on touchend. Job done. And working on every simulated iOS device I have tried so far.

See this fiddle for a working example. View in mobile browser.

its not working on iOS 12. Everything is scrolling 🙁

Do you mean my fiddle is not working 0lli0?

Confirm. Your demo is no longer working on iOS 12.1 Safari.

Your demo site is not working on iOS 12.1. Any other suggestion?

That’s a real bummer. Can I just check that you are looking at the right thing? (The original link seems to have gone from my message, so I am wondering…)

https://fiddle.jshell.net/daffinm/fwgnm7hs/16/show/

I am referring to modal on iOS. The demo site I tried is http://benfrain.com/playground/modal-demo.html The link you posted in your comment was about a veritcal slider, which was not what this article about, right? or do I misunderstand anything?

In my case I wanted to display a fixed-position modal fullscreen. And solution seems very simple: setting “overflow:hidden;” along with “height:100%;” on both html & body tags. The “height:100%;” is key here. That alone solves the scrolling problem, no javascript needed. Only modal content was scrollable, body was not scrolling at all. Tested on iPhone X Safari/Chrome, iPhone 8 Safari/Chrome, iPhone 7 Safari/Chrome (all via browserstack). Of course on Android Chrome it works flawlessly.

This did NOT solve the problem in my case. What i did was:

body.no-scroll, html.no-scroll { overflow: hidden; height: 100%; touch-action: none; }

The key seems to be “touch-action: none;” on iOS 12.1.x

You sir, are a genius. “touch-action: none;” does also solve it on iOS 13.

You also need to set “-webkit-overflow-scrolling: auto;”. if not set, scrolling to “negative” will invalidate “touch-action: none” and you will be able to scroll the body.

This no longer works on iOS 12

In my case i just had to add

overflow-x: scroll; -webkit-overflow-scrolling: touch;

To the modal only not to the body in order to be scrollable, without affecting the background content

This works, although for `-webkit-overflow-scrolling`, `none` is not a valid value. See https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling . Possible values are “auto” | “touch”

If like me, you spent hours trying to find a scroll solution for Safari 10, I found it and made a simple React hooks version here: https://codesandbox.io/s/react-modal-scrollable-safari-10-friendly-3xzzy

2021 update with iOS 14+ All solutions mentioned are not working as soon as the browser bars in Safari disappear. So if you already scrolled the page and then open a modal, the scroll event will bubble as soon as you reach the top or bottom of your modal scroll. This is also an issue if you have a PWA in standalone mode added to the homescreen where there are no browser bars at all, and therefore no way to block this behaviour.

I made a demo to replicate the issue. It even has a manifest.json so you can add it like a PWA in standalone mode to your homescreen.

https://5n944.csb.app/

This is so dumb, I also noticed that my modal works perfectly when I set the url bar to be at the top, and nothing helps when it’s at the bottom.

This helped me on Dec 22, 2023 thank youuuuuuu

Understanding native JavaScript array methods

The ios safari menu bar is hostile to web apps: discuss.

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?

Safari Not Working on iPhone? Here’s How to Fix It

What to know.

If Safari is not working, be sure to check your cellular and Wi-Fi connection.
Confirm that you have not set any Screen Time limits for Safari.
If all else fails, try clearing Safari history and browsing data.

It can be incredibly frustrating when Safari is not working on iPhone. Whether web pages are not loading or you’re getting a “Safari cannot open page” error message, we’re going to go over a few different fixes that should help resolve any issues you are having with your web browser.

Why Is Safari Not Working?

How to Check Screen Time Settings

How to Clear Safari Browsing Data

There are a few different reasons why Safari is not working on your iPhone, so we'll recommend multiple solutions to help resolve the problem. Let’s get started with how to fix Safari on iPhone.

How to Check Cellular & Wi-Fi Connection

Like any web browser, Safari needs an internet connection to work. For more Safari troubleshooting fixes, like how to fix the Safari cannot open page error, be sure to sign up for our Tip of the Day newsletter. Now, to fix any problems with Safari not working on your iPhone, let’s first check your cellular and Wi-Fi connection:

Swipe down from the top right edge of your screen to open the Control Center.

If these settings are already enabled, but your web browser is still giving you trouble or Safari can't find server, there are other solutions to try.

How to Enable Cellular Data for Safari

One of the iPhone’s many useful features is that you can restrict certain apps from using your cellular data . This is great for those who do not have unlimited data plans. However, that also means that if you disable data for Safari, then the web browser will be unable to load any web pages if you're not connected to Wi-Fi. If Safari is not working on your iPhone, here’s how to check your cellular data settings:

Open the Settings app, and tap Cellular.

Once you've confirmed that cellular data is enabled for Safari, try opening a web page to see if the issue has been resolved.

Safari Won’t Open on iPhone? Check Screen Time Settings

Screen Time is a handy feature that is designed to help you reduce the amount of time you spend on your phone, including restricting access to a particular app. If you played around with Screen Time settings in the past, you might have accidentally set an App Limit for Safari by accident. If Safari won't open this is one of the first things you should check. Here’s how to check your Screen Time settings when Safari is not working on iPhone:

Open the Settings app, and tap Screen Time.

If you do not see Safari in this list, then you have not set any Screen Time limits for your web browser. If Safari is still not opening on your iPhone, the issue could be elsewhere.

Sometimes clearing out old website history and data can help with issues related to Safari not working. Here’s how to do it:

Note: Clearing this data will log you out of your online accounts and clear recent websites from your browsing history. While that is not a huge loss for most people, it can be a bit annoying when you get Safari working again, so it is best to use this option as a last resort.

Open the Settings app, scroll down, and tap Safari.

If Safari is not working on your iPhone after clearing your browsing data, try closing the app completely.

Close & Re-open Safari

If Safari is still not working on iPhone, try closing and re-opening the app . Sometimes apps stop functioning correctly so completely closing it can help resolve things. When you close the app and re-open it, this effectively restarts the app.

If Safari cannot open a page, the above fixes should help resolve any underlying issues. However, if you are still having trouble with Safari not working on iPhone, you may need to seek further assistance from Apple Support . Next, find out how to block or allow pop-ups in Safari .

How do I get the Safari icon back on my iPhone? Safari is one of the few Apple apps that cannot be removed from your iPhone. However, if it has somehow vanished from your phone, there are a few different ways to get Safari back on iPhone . Our article covers each method in detail, ensuring you can find the app.
Why won't Safari open on my iPhone? If Safari won't open at all, the problem could be your Screen Time settings. If you don't have any Screen Time restrictions, you could be experiencing a software bug, in which case, I would recommend reaching out to Apple Support for help.
How do I reset Safari on my iPhone? You can close and re-open Safari to reset it. However, if that does not work, you can follow the above steps for clearing your browsing data .

Author Details

Rhett Intriago

Rhett Intriago is a Feature Writer at iPhone Life, offering his expertise in all things iPhone, Apple Watch, and AirPods. He enjoys writing on topics related to maintaining privacy in a digital world, as well as iPhone security. He’s been a tech enthusiast all his life, with experiences ranging from jailbreaking his iPhone to building his own gaming PC.

Despite his disdain for the beach, Rhett is based in Florida. In his free time, he enjoys playing the latest games, spoiling his cats, or discovering new places with his wife, Kyla.

Master iOS 17 with our latest in-depth guide!

Featured Products

Join us as we explore the essential apps and tools to make the time spent on your iPhone more focused and enjoyable. You'll learn all about our favorite tips for saving time and creating a more efficient device when you become an Insider today !

Most Popular

How to Know If Someone Blocked You on iMessage

How to Tell If Someone Blocked Your Number on iPhone

Why Is My iPhone Battery Draining So Fast?

10 Simple Tips To Fix iPhone Battery Drain

How to Schedule a Text Message on iPhone

How to Tell If Your iPhone or iPad Is Charging When Off or On (iOS 16)

How to Tell If a Dead iPhone Is Charging

How to Put Two Pictures Side-by-Side on iPhone (iOS 17)

How To Put Two Pictures Together on iPhone

How to Transfer Call from Apple Watch to iPhone

iPhone Alarm Volume Low? How to Make an iPhone Alarm Louder

Can iPhones Get Viruses? How to Detect & Remove Malware (iOS 17)

How to Turn Off Flashlight On iPhone: 3 Easy Ways (2023)

How To Turn Off Flashlight on iPhone (Without Swiping Up!)

Hide Apps on iPhone So Only You Can Find Them

How to Hide an App on Your iPhone

How to Fix Apple Watch ECG Not Working

Why Is Find My iPhone Not Working? Here’s the Real Fix

Featured articles, why is my iphone battery draining so fast 13 easy fixes.

How to Find Out Who an Unknown Caller Is (2023)

Identify Mystery Numbers: How to Find No Caller ID on iPhone

Apple ID Not Active? Here’s the Fix!

How to Cast Apple TV to Chromecast for Easy Viewing

Fix Photos Not Uploading to iCloud Once & for All (iOS 17)

Apple ID Login: 9 Ways to Fix the Error Connecting to Apple ID Server Message (iOS 16)

There Was an Error Connecting to the Apple ID Server: Fixed

CarPlay Not Working? How to Fix Apple CarPlay Today (iOS 17)

CarPlay Not Working? 4 Ways to Fix Apple CarPlay Today

Check out our sponsors.

Each email reveals new things you can do with your phone (and other devices) with easy-to-follow screenshots.
Enter your email to get your first tip immediately!

If Safari isn't loading websites or quits on your iPhone, iPad, or iPod touch

If you can't load a website or webpage, or Safari quits unexpectedly, follow these steps.

Connect to a different network

Try to load a website, like www.apple.com , using cellular data. If you don't have cellular data, connect to a different Wi-Fi network , then load the website.

If you're using a VPN (Virtual Private Network), check your VPN settings . If you have a VPN turned on, some apps or websites might block content from loading.

Restart your device

Turn off your device and turn it on again.

Restart your iPhone

Restart your iPad

Restart your iPod touch

Clear website data

You can clear website data occasionally to improve Safari performance.

Go to Settings > Safari.

Tap Clear History and Website Data.

Tap Clear History to confirm.

Turn on JavaScript

Turn on JavaScript if it's not already on.

Go to Settings > Safari > Advanced.

Turn on JavaScript.

Get more help

If the issue continues and only affects a certain website or webpage, check if you have Private Relay turned on. You can temporarily turn off Private Relay in iCloud Settings . If Safari still doesn't load websites and you tried all of these steps, contact the website developer for more help.

Explore Apple Support Community

Find what’s been asked and answered by Apple customers.

Contact Apple Support

Need more help? Save time by starting your support request online and we'll connect you to an expert.

IMAGES

Safari not working? How to troubleshoot your problems
Safari Not Working On iPhone? Here's The Fix. [Step-By-Step Guide]
Safari position fixed overflow hidden
Safari Not Working On iPhone? Here's The Fix. [Step-By-Step Guide]
Safari Not Working on iPhone? Here are 11 ways to fix it
Safari Not Working on iPhone? Here are 11 ways to fix it

VIDEO

🍎 iPhone Safari For Android
SAFARI BROWSER IS DONE FOR! 👀🫣
How To Fix Safari Browser Not Working On iOS 16
How To Turn On Private Browsing on Safari in iPhone iOS 17
How To Enable Safari Experimental Features On iPhone (2023)
How to Fix Safari Clear History Greyed Out in iOS 17

COMMENTS

Overflow: hidden not working in ios safari
1. Setting overflow hidden to html, body using jquery or css does not work in ios safari but works on safari on mac and all other browsers. I tried looking for answers here : Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers. The answer explains to use a wrapper div with position: relative and add overflow: hidden to ...
Overflow hidden + round corners not working on Safari
Overflow hidden + round corners not working on Safari. Design help. Custom code. ... round corners don't need overflow hidden most of the time (they don't need it for bg images for example) ... (don't know why they didn't fix it). Workaround you can find here: Safari not hiding overflow on rounded corner divs. 1 Like. Rounded corner of ...
Overflow: hidden not working in iOS safari.
February 18, 2017 5:07am. 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 ...
Overflow Content not loading on iOS safari
I have a horizontal scroller on my website and it's producing a really weird behaviour where on iOS safari the content which is overflow:hidden doesn't load even when it's scrolled into view. The design works as expected on a desktop/laptop. page which is not working: Gelato Messina Specials | Gelato Messina Australia
Safari border-radius + overflow: hidden + CSS transform fix
Safari border-radius + overflow: hidden + CSS transform fix Raw. gistfile1.css This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. ... Working, thank you 🥇 ...
Bugfix (Workaround) for Safari (iOS): Border radius with overflow
There is a bug in Safari when using border-radius and overflow: hidden. Especially when applying transform to a child. In this case, overflow: hidden does not always work. The child ignores the border radius and overflows. It's a very old bug. And sadly it seems that it will never be fixed. Anyway, we can't wait for it.
overflow
Values. visible: content is not clipped when it proceeds outside its box.This is the default value of the property; hidden: overflowing content will be hidden.; scroll: similar to hidden except users will be able to scroll through the hidden content.; clip: content is clipped when it proceeds outside its box.This can be used with overflow-clip-margin to set the clipped area.
Simple Solution to Prevent Body Scrolling on iOS
It's unfortunate that for a long time, only using overflow: hidden to prevent scrolling did not work on iOS. But with only 18 lines of JavaScript, we can work around the problem. In the end, you must decide if it is even necessary in your case to support older versions of iOS. Luckily, iOS users usually do update very quickly. Ressources
Fix scrolling bug on iOS Safari with fixed elements and bottom bar
Fix scrolling bug on iOS Safari with fixed elements and bottom bar - ios-fixed-scrolling-fix.css ... overflow: hidden; /* make sure iOS does not try to scroll the body first */} /* your wrapper, most likely mobile menu */ ... but they work fine after the dragStart event it's triggered. The webkit renders properly. I forgot. There is another ...
SOLUTION: Scroll trapped issue on iOS
The trick is to enable scroll bars to show all the time, so that any scroll issues become clear. This is under mac system preferences > General > Scroll bars ( see guide) Once this was enabled ...
Preventing body scroll for modals in iOS
iOS doesn't prevent users from scrolling past the modal if there is content that exceeds the viewport height, despite you adding that condition to the CSS. One solution is to write the window.innerHeight into both HTML and body elements in the DOM and then toggle the overflow: hidden style on and off on the body and html: var vpH = window ...
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 ...
153852
A yellow box with text appears. 4. Scroll the yellow box to its bottom, where there are "Close" and "Save changes" buttons, and lift your finger off the screen to ensure that the scroll gesture ends. 5. Attempt to scroll the yellow box further downward (which is to say, apply a "fling upward" gesture to the yellow box).
Safari Overflow Hidden Problem
All you have to do is set that element to have a relative position. For instance, if you were to specify for the body to hide the horizontal scrollbars you would want to have the following css in your stylesheet: body {. position:relative; overflow-x:hidden; } All ya have to do is set the position to relative! Hope this helps someone :)
Scrolling in Safari not working
Apple silicon. 1.) Shut down your Mac. 2.) Turn on your Mac and continue to press and hold the power button until you see the startup options window. 3.) Select your startup disk, then press and hold the Shift key while clicking "Continue in Safe Mode.". 4.)
Safari Not Working on iPhone? Here's How to Fix It
Open the Settings app, and tap Cellular. Scroll down and find Safari. If the toggle is gray, that means cellular data is disabled for Safari. Tap it so that it turns green to turn it on. Once you've confirmed that cellular data is enabled for Safari, try opening a web page to see if the issue has been resolved.
How to disable scrolling on mobile Safari?
0. Here is what I did: I check the body y position , then make the body fixed and adjust the top to the negative of that position. On reverse, I make the body static and set the scroll to the value I recorded before. var body_x_position = 0; function disable_bk_scrl(){. var elb = document.querySelector('body');
If Safari isn't loading websites or quits on your iPhone, iPad, or iPod
Connect to a different network. Try to load a website, like www.apple.com, using cellular data. If you don't have cellular data, connect to a different Wi-Fi network, then load the website. If you're using a VPN (Virtual Private Network), check your VPN settings. If you have a VPN turned on, some apps or websites might block content from loading.
html
I have an off-canvas navigation (using Zurb Foundation) and I have the overflow set to auto so the user can scroll if the menu is long.. It is currently working on the following browsers:. Chrome; Firefox; Internet Explorer; Android Chrome; Safari iOS; but not on Safari for OS X: It treats the menu like overflow is hidden and does not scroll.. Here is the HTML menu:
javascript
I have a fixed layout for my website with a header, main content, and footer. I am using Tailwind CSS for the front-end stylings. Despite implementing various solutions found on Stack Overflow, such as setting meta tags and window events, I'm still unable to hide the iOS Safari address bar when scrolling down on an iPhone.