gerhard gerhard - 1 year ago 54
CSS Question

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

Answer Source

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 or position:relative to the html and body, it fixes the issue.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download