Search code examples
cssoverflowhiddencss-transforms

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

Solution

  • 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.