CODEWITHSUNDEEP
htmlcsssafarioverflow
KVF-IT
KVF-IT

Reputation: 143

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?

Upvotes: 12

Views: 31891

Answers (3)

Hejhejhej123
Hejhejhej123

Reputation: 1195

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.

Upvotes: 5

deleted
deleted

Reputation: 782

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

Upvotes: 9

jakelovelock
jakelovelock

Reputation: 485

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

Upvotes: 13

Related Questions