overflow:hidden not working with translation in positive direction

css overflow hidden css-transforms
gerhard picture gerhard · May 9, 2013 · Viewed 14.6k times · Source

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

Answer

daleyjem picture daleyjem · Jul 6, 2013

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.

Related questions

Make child visible outside an overflow:hidden parent

In CSS the overflow:hidden is set on parent containers in order to allow it to expand with the height of their floating children. But it also has another interesting feature when combined with margin: auto... If PREVIOUS sibling is …

Read More
CSS: Is it correct that text content of a div overflows into the padding?

I expected that the padding inside a div would remain clear of any text. But given the following html/css, the content-text spills out into the padding; <div class="foo">helloworld</div> .foo { float: left; overflow: …

Read More
CSS: Can you prevent overflow: hidden from cutting-off the last line of text?

When using CSS overflow: hidden , I've often found that the last line of text gets partially cut-off. Is there a way to prevent this so that any partial lines do not show-up. Almost like a vertical word-wrap.

Read More