I came across with a weird thing lately with overflow: hidden;
. I set it to an element, and then I want to transform the elements in it with translate()
, when it translates in negative direction it will be hidden, but if I translate in the positive direction, it won't be hidden. In desktop browsers it's not really showing, but you can reach it with a little bit of mouse work. And on mobile it's just scrolls, so that is the worst.
Here is an example showing it: http://cssizer.com/KLHlPShW
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.
hidden - The overflow is clipped, and the rest of the content will be invisible. scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content. auto - Similar to scroll , but it adds scrollbars only when necessary.
It's because <body> has a default of 8px margin so when you hide the <body> the margin goes away.
So I've been working with something similar all day and realized that while I had
html, body {overflow:hidden; }
...if I add position:absolute
, position:relative
or position:fixed
to the html and body, it fixes the issue.
I wrap everything in a container div with the following code. Explicitly set overflow appropriately in both directions. This keeps the X-axis from scrolling in iOS Safari, even if there are elements translated to the right of the main content area.
But scrolling performance is significantly degraded unless you add -webkit-overflow-scrolling: touch;
. It took me a long time to find this! Hopefully it helps someone else.
.scrollContainer {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
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