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

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);` — gerhard, May 10 '13 at 08:02

daleyjem · Accepted Answer · 2018-06-11T19:48:14.183

32

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.

edited Jun 11 '18 at 19:48

answered Jul 06 '13 at 02:32

daleyjem

2,335
1
23
34

7

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`. – gerhard Jul 12 '13 at 14:11
@gerhard it's 2016, and I am having the same issue... Position: fixed - issue resolved. Thank you! – Edgar Jun 21 '16 at 17:46

score 2 · Answer 2 · answered Aug 12 '16 at 05:54

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

Thanks a lot, dude! Works like a charm – Demven Weir Apr 06 '17 at 18:54 — Demven Weir, Apr 06 '17 at 18:54

Matthias · Answer 3 · 2020-11-19T14:43:36.440

2

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.

edited Nov 19 '20 at 14:43

answered May 22 '17 at 19:33

Matthias

45
6

If I remove the `z-index`es from your fiddle, it behaves the same. I don't think they are necessary at all. – Ky - Jul 24 '19 at 06:21

score 1 · Answer 4 · answered Oct 08 '18 at 12:12

1

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

answered Oct 08 '18 at 12:12

Boyd

11
1

This worked for me. No need to set position as in the accepted answer. – Barun Nov 20 '19 at 10:55

overflow:hidden not working with translation in positive direction

4 Answers4

Linked