: nascosto non funziona con traduzione in direzione positiva

Question

Ultimamente mi sono imbattuto in una cosa strana con overflow: hidden;. L'ho impostato su un elemento e poi voglio trasformare gli elementi in esso con translate(), quando si traduce in direzione negativa sarà nascosto, ma se traduco nella direzione positiva, non sarà nascosto. Nei browser desktop non è mostrato, ma puoi raggiungerlo con un po 'di lavoro del mouse. E sul cellulare sono solo rotoli, quindi è il peggiore.

Ecco un esempio che mostra che: http://cssizer.com/KLHlPShW

Answer 1

Così ho lavorato con qualcosa di simile per tutto il giorno e si rese conto che, mentre ho avuto

html, body {overflow:hidden; }

... se aggiungo position:absolute o position:relative in html e body, risolve il problema.

Answer 2

Ho avvolto tutto in un contenitore div con il seguente codice. Impostare in modo esplicito un overflow in modo appropriato in entrambe le direzioni. Ciò mantiene l'asse X dallo scorrimento in iOS Safari, anche se ci sono elementi tradotti a destra dell'area del contenuto principale.

Ma le prestazioni di scorrimento sono notevolmente ridotte a meno che non si aggiunga -webkit-overflow-scrolling: touch;. Mi ci è voluto molto tempo per trovare questo! Speriamo che aiuti qualcun altro.

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

Answer 3

ho avuto lo stesso identico problema, ed ecco come ho riparato:

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

Ecco un JSFiddle .