Safari Overflow Hidden Problem

There may be times when you need to hide the overflow (scrollbars) being visible on a page. You can specify to have all scrollbars hidden or the x and y scroll bars separately. When trying to hide the overflow of a project I was working on I realized that the ‘overflow:hidden’ was not working on the Safari browser. This was very frustrating because it worked on all other browsers except Safari. Well, there is a very simple solution to solve this 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 :)

  • al

    it did help me

  • http://www.burrows.info RIck

    HI,

    I’m trying to stop horizontal scroll is Mobile Safari on the iPad… I have tried every way (or so it feels like) to get this working. However even setting my body to relative as you have in the example did not work for me.

    What I’m trying to do is have a webpage at 1024 wide, that you only see 768 or it when in portrait mode. It simple reveals the missing pixels when you go to landscape. So I never want to page to horizontal scroll.

    Any help you things you can think of would be great.

    Thanks

  • Matt

    Thank you! Very helpful!

  • Stefano

    Great! thank you

  • me

    saved my day

  • nickvolvap

    Thanks, it does work on iPad.

  • Jap

    use: -webkit-overflow-scrolling:touch;

  • Voodoc

    Thanks! I searched for hours for a solution! Well done! You made my day!

  • http://www.marfeel.com Oliver

    Thank you very much!

    This problem has driven me crazy in iOS6, and I had huge problems when rotating the device or presenting iframes in my web app. Now is working nice!

  • Mai Van Hien

    thank you very much! :)

  • vinodsobale

    on IOS 8.0. Doesn’t work. Unfortunately :(

  • userAlexander

    Есть такая проблема, использую иконочный шрифт, он висит на :before элемента который на обсолюте, на родителе бордер радиус + хидден, хидден в этой ситуации не работает в Сафари 5.1.7

  • Alex Martens

    In my case, the above didn’t work, but the following did:

    html, body {
    overflow-x: hidden;
    }

  • http://www.mikepostma.com Mike Postma

    Thank you! Such a simple solution for such a frustrating problem.

  • Alex Martens

    Glad to have helped. My experience exactly!

  • Prashant Birajdar

    In my case dose not work on windows safari

  • Prashant Birajdar

    In my case both are not working

  • CD

    Unfortunately, your solution doesn’t help me as the div I need the scrollbars on must be position: fixed. :-(

  • Kenneth Auwers

    Also worked for me thank you!