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?
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)
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.
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.
On your site, you haven't declared overflow-x: hidden
for your html
tag. Adding it seems to solve the problem.
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With