Safari Overflow Hidden Problem

Updated Jul 17, 2020・1 minute read Post By Tony Lea

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 {

All ya have to do is set the position to relative! Hope this helps someone :)

© 2020 DevDojo LLC. All rights reserved.