Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 839
KVF-IT Avatar asked Sep 19 '15 09:09

KVF-IT


People also ask

How do I add overflow hidden to my body?

Drag a Div block onto your page under the Body. Move all your page elements inside the Div block (e.g., you're treating the Div block as a wrapper of all your content) Select your Div block wrapper. Open Style panel > Size and set Overflow to hidden (only after moving all your content into the Div block wrapper)

What is difference between overflow and overflow-X?

The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both): overflow-x specifies what to do with the left/right edges of the content. overflow-y specifies what to do with the top/bottom edges of the content.

What is overflow-X property?

The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges. Tip: Use the overflow-y property to determine clipping at the top and bottom edges.


2 Answers

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

like image 155
deleted Avatar answered Oct 04 '22 00:10

deleted


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

like image 28
jakelovelock Avatar answered Oct 04 '22 00:10

jakelovelock