overflow:hidden not working with translation in positive direction

Question

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

Southsoutheast

What are we meant to be looking at on that page? – Hamate

It seems that on android it works fine, but on iOS I can scroll all the way to the button that has -webkit-transform: translateX(3212px); – Southsoutheast

Answer 1

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.

Lacroix

Interesting I will try it out, thanks. I forgot to write here, but I fixed the issue with adding to the translated element position: fixed. – Southsoutheast

@Southsoutheast it's 2016, and I am having the same issue... Position: fixed - issue resolved. Thank you! – Joviality

Thanks! position: fixed on "html, body" did the trick for me. – Photomontage

Answer 2

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;
}

Tropho

Thanks a lot, dude! Works like a charm – Ancestress

Answer 3

I had the exact same problem, and here is how I fixed it:

HTML

<div id="container">        <!-- defines "boundaries" of content -->
    <div id="content">      <!-- part of it must be hidden -->
    </div>
</div>

CSS

#container {
    overflow: hidden;
    z-index: 2; 
}

#content {
    /* Translation code ...*/ 
    z-index: 1;
}

Here is a JSFiddle.

Mews

If I remove the z-indexes from your fiddle, it behaves the same. I don't think they are necessary at all. – Observable

Answer 4

Sadly the above solutions didn't work for me. In my case it did respect overflow: hidden when used on html. So for those people with the problem of translate extending the viewport:

html {
overflow-x: hidden;
}

Diarchy

This worked for me. No need to set position as in the accepted answer. – Kneeland