Overflow-x: Hidden, Is Not Working In Safari

I have a site that works well on every browser, except on Safari. On safari I can scroll horizontally for many thousands of pixels. Anyone have had this issue?

Solution 1:

On your site, you haven't declared overflow-x: hidden for your html tag. Adding it seems to solve the problem.

Solution 2:

Tried the answer supplied above but it didn't fix my issue so I'm leaving my research / fix here for any others looking for help in the future.

I read that apparently Safari overlooks overflow when rendering so you have to target the body better? I gave the body a class and input the code below and this has fixed my issue.

html, body {
	position:relative;
	overflow-x:hidden;
}

OR

html, .custom-body-class {
	position:relative;
	overflow-x:hidden;
}

Hope this helps someone...

Solution 3:

This is a bit old but I recently stumbled on this problem and the selected answer did not work for me. jakelovelocks answer also gave me some bugs when setting position relative to the body. So my solution was to create a wrapper around the page and then add:

position:relative;
overflow-x:hidden;

to that wrapper instead of the body. It now works great without any problems.