Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

overflow:hidden not working with translation in positive direction

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

like image 341
gerhard Avatar asked May 09 '13 19:05

gerhard


People also ask

Why does overflow hidden not work?

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.

What happens if we use overflow hidden?

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.

Why does overflow hidden move body to top of the page?

It's because <body> has a default of 8px margin so when you hide the <body> the margin goes away.


2 Answers

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.

like image 148
daleyjem Avatar answered Sep 22 '22 10:09

daleyjem


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;
}
like image 44
Nick Splendorr Avatar answered Sep 23 '22 10:09

Nick Splendorr