translateX und Überlauf versteckt funktioniert nicht wie erwartet

Das ist mein Wordpress-Starter Thema: http://starter.devurl.net/translateX und Überlauf versteckt funktioniert nicht wie erwartet

Relevante HTML:

<html> 
    <body> 
     <ul class="skiplinks">...</ul> 
     <div id="site-wrap"> 
      <!-- content here --> 
     </div> 
    </body> 
</html>

Relevante CSS:

body { 
    direction: rtl; 
    overflow-x: hidden; 
} 

#site-wrap { 
    position: relative; 
    min-height: 100%; 
    transform: translateX(-250px); 
}

Anzeigen der Webseite in Mobil (in Chrome Devtools).

Körper hat overflow-x: hidden; div # Website-Wrap transform: translateX(-250px);

Soweit ich die Idee, # Website-wrap annehmen greifen nach links zu bewegen und einen leeren Raum auf der rechten Seite verlassen, ohne horizontale Scrolle zu den Seiten.

Beachten Sie die Website-Richtung ist RTL, aber es sollte nicht ein Problem sein, und ich möchte es so behalten, ohne ltr irgendwo im Dokument zu verwenden.

Vielen Dank!

Quelle

2017-02-03 yuvalsab

Ich stimme zu, ich kann nicht scheinen, die gleiche Situation in jsfiddle neu zu erstellen. Tut mir leid, dass ... – yuvalsab

Also, nachdem ich einige Diagnose und Fehlerbehebung gemacht habe, glaube ich * die Lösung besteht darin, '' overflow-x: hidden; ''zu dem' html' Selektor hinzuzufügen: 'html {overflow-x: hidden;} '. Können Sie das versuchen und sehen, ob es das Problem für Sie behebt? –

JA! Ich verstehe immer noch nicht, warum es sich so verhält ... der hat schon einen Überlauf-x, warum sollte der html auch einen bekommen? – yuvalsab

In meiner Erfahrung mit Mobile, aufgrund der Art, wie sie verschiedene Dinge rendern, müssen Sie manchmal auch das html Element adressieren, um sicherzustellen, dass die Dinge richtig funktionieren. Diese

ist, wie es aussieht (vor fix) auf einem Samsung Galaxy (ich habe hinzugefügt Grenzen Elemente zu veranschaulichen, was passiert):

Black: html-Element Grün: Körperelement Rot: Site- Element wickeln Blau: Sprungmarken Element

Beachten Sie, dass die body und html sind eigentlich nur die richtige 250px.

Durch diese Zugabe:

html { 
    overflow-x: hidden; 
}

das Problem scheint gelöst zu werden:

Ich bin sicher, dass jemand klüger als ich bin zu erklären, warum in der Lage!

Quelle

2017-02-03 00:46:52

Wie Sie, werde ich auch glücklich sein zu wissen, warum dies das Problem behoben. Danke für die Lösung. – yuvalsab

translateX und Überlauf versteckt funktioniert nicht wie erwartet

Antwort

Verwandte Themen