przepełnienie: ukryty nie działa z tłumaczeniem w dodatnim kierunku

Question

Natknąłem się ostatnio na dziwną rzecz z overflow: hidden;. Ustawiam go na element, a następnie chcę przekształcić w nim elementy za pomocą translate(), gdy tłumaczy się w kierunku ujemnym, będzie ukryty, ale jeśli przetłumaczy się w kierunku dodatnim, nie będzie ukryty. W przeglądarkach na komputery tak naprawdę nie wyświetla się, ale można do niego dotrzeć przy odrobinie pracy z myszą. A na urządzeniach mobilnych to tylko zwoje, więc to jest najgorsze.

Oto przykład pokazujący go: http://cssizer.com/KLHlPShW

Answer 1

Więc pracuję z czymś podobnym cały dzień i uświadomiłem sobie, że podczas gdy miałem

html, body {overflow:hidden; }

... jeśli dodać position:absolute lub position:relative do html i body, rozwiązuje problem.

Answer 2

Zawijam wszystko w pojemniku div następującym kodem. Jawnie ustawić przepełnienie odpowiednio w obu kierunkach. Dzięki temu oś X nie będzie przewijana w Safari na iOS, nawet jeśli elementy są przetłumaczone z prawej strony głównego obszaru zawartości.

Jednak przewijanie jest znacznie pogorszone, chyba że dodasz -webkit-overflow-scrolling: touch;. Zajęło mi to dużo czasu! Mam nadzieję, że pomaga komuś innemu.

.scrollContainer { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch; 
} 

Answer 3

miałem dokładnie ten sam problem, a oto jak naprawiłem go:

HTML

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

CSS

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

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

Oto JSFiddle .