Überlauf-x:versteckt; auf dem mobilen Gerät funktioniert nicht

Lesezeit: 6 Minuten

Benutzer-Avatar
Dorvalla

Ich hoffe, ihr könnt mir helfen, denn ich kann mir anscheinend nicht den Kopf darüber zerbrechen. Ich baue eine einseitige Site, die gut funktioniert, mit Ausnahme einer Sache, nämlich dem Overflow-x:hidden im Tablet-Ansichtsfenster (und wahrscheinlich auch auf dem Smartphone, habe das noch nicht getestet).

Trotz des Körpers mit body {overflow-x:hidden;} was in normalen browsern auf dem pc gut funktioniert, ich kann mich etwa 25 pixel zur seite bewegen, weil das der überlauf meines gedrehten div ist, der aus dem bildschirm herausragt, den ich verstecken wollte.

Gibt es eine Möglichkeit, dies zu beheben? Ich habe unten einen Teil des Kopfes und HTML / CSS bereitgestellt

Das Viewport-Meta-Tag.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Das auf die Medienabfragen angewendete CSS und die entsprechenden Elemente, die überlaufen

@media only screen and (max-width: 992px){
    #skills, #experience    {overflow-x:hidden;}
}
@media (max-width: 479px){
    body                    {overflow-x:hidden;}
}

Und das reguläre CSS, das auf die html / body-Tags angewendet wird

body, html  {height: 100%;width: 100%;font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;color: #757575; overflow-x:hidden;}

Die Ausweise #skills und #experience haben eine Klasse aufgerufen .hoek die wie folgt definiert ist und den Überlauf verursacht.

    .hoek    {margin: 0 -50px; 
              -webkit-transform-origin:left center; 
              -moz-transform-origin:left center; 
              -o-transform-origin:left center; 
              -ms-transform-origin:left center;
              margin-top: -175px;                       
              -webkit-transform:rotate(5deg); 
              -moz-transform:rotate(5deg); 
              -o-transform:rotate(5deg); 
              -ms-transform:rotate(5deg);
              z-index: 20;
    }

Ich muss darauf hinweisen, denke ich, dass die #skills und #experience sind sections und nicht div. Ich bin mir nicht sicher, ob das ein Problem innerhalb des Codes sein könnte, aber ich dachte nicht. Wenn weitere Informationen benötigt werden, lassen Sie es mich bitte wissen, aber ich dachte, ich hätte hier die Grundlagen abgedeckt.

Ich weiß nicht, wo ich mit einer Geige anfangen soll, also liefere ich Ihnen nur den Testlink der Seite: http://www.jellyfishwebdesign.nl/Joost/index.php

  • was läuft aus deinem body tag über?

    – Vico

    12. Juni 2014 um 20:24 Uhr

  • die Abschnitte mit ids #skills und #experience, die die abgewinkelte .hoek-Klasse haben

    – Dorvalla

    12. Juni 2014 um 20:26 Uhr


Benutzer-Avatar
Dorvalla

Habe die Antwort tatsächlich hier auf Stack overflow gefunden:

Die Browser auf Mobilgeräten ignorieren die overflow-x:hidden innerhalb der body und html markieren wenn <meta name="viewport"> Tag vorhanden ist, also habe ich einen Wrapper im Body-Tag erstellt, der den Rest meines Inhalts mit a abdeckt overflow-x: hidden darin, das Problem zu lösen.

Dokumentation:

Overflow-x:hidden verhindert nicht, dass Inhalte in mobilen Browsern überlaufen.

Das Schlimme ist, dass es jetzt die Verwendung eines jquery-Plugins verhindert, das scrollt….

  • Nun, dies ist ein Thema aus dem Jahr 2014, in Gedanken an meine Website, ich habe keine Ahnung, wie Ihre aussieht, und Ihr Kommentar ist hier nicht sehr konstruktiv. Erstellen Sie ein neues Thema, und ich kann Ihnen dort möglicherweise helfen.

    – Dorvalla

    2. August 2019 um 12:08 Uhr

  • Hier nichts Persönliches. Dies ist das gewählt Antwort, also ist es wichtig, dass Programmierer, die von Google hierher kommen, sehen, dass sie nicht allein sind. Ganz natürlich hat die neueste Antwort für mich funktioniert, also habe ich darauf geachtet, sie auch für zukünftige Generationen hervorzuheben.

    – GalAbra

    3. August 2019 um 6:17 Uhr

  • Bro ist 2021 und das hat bei mir nicht funktioniert 🙁 Irgendwelche Ideen?

    – Bernardo Olisan

    8. November 2021 um 17:45 Uhr

Einstellung versuchen minimum-scale=1 Anstatt von maximum-scale=1.

minimum-scale steuert, wie weit aus der Benutzer kann dabei zoomen maximum-scale steuert, wie weit in sie können zoomen. Um zu verhindern, dass der Überlauf angezeigt wird, müssen Sie die Möglichkeit des Benutzers einschränken, herauszuzoomen, nicht hineinzuzoomen.

  • Hat bei mir nicht funktioniert, es hat die Schriftrolle ganz nach rechts verschoben. Und ich konnte nicht mehr nach links scrollen.

    – Benutzerbild

    2. Mai 2021 um 12:50 Uhr


Wie Dorvalla betonte, body und html Tags werden von Smartphone-Browsern ignoriert, obwohl nicht von “Big Screen” -Browsern. Ich habe das Problem gelöst, indem ich das erste untergeordnete Element der Seitenstruktur verwendet habe, sodass kein zusätzlicher Wrapper erforderlich ist.

zB für meinen WordPress-Fall:

    .site {
        overflow-x: hidden;
        /* Unnecessary IMHO, uncomment next line to force hidden behavior */
        /* overflow-x: hidden !important; */
        /* Additional tunning proposed by the community */
        position: relative;
        width: 100%;
    }

  • position: relative hat meinen Tag gerettet!

    – GalAbra

    24. Juli 2019 um 13:14 Uhr

  • @GalAbra und dein Kommentar meine Nacht!

    – Ponzio Pilato

    18. Februar 2021 um 22:52 Uhr

  • @GalAbra Dein Kommentar hat meinen gerettet! xx

    – Anant Shechar

    18. Mai um 16:21 Uhr

Benutzer-Avatar
Mikeys4u

Ich hatte das gleiche Problem und versuchte, Körper mit anzuwenden overflow-x: hidden;und viele andere Antworten, aber was in meinem WordPress funktionierte, war die Anwendung einer globalen CSS-Regel wie unten.

body, html {
overflow-x: hidden;
}

Dadurch entfällt die Bewegung von links nach rechts auf Mobiltelefonen. Der HTML-Teil wird benötigt, nicht nur der Text!

Benutzer-Avatar
Soumen Khara

Einstellung versuchen minimum-scale=1 Anstatt von maximum-scale=1 oder initial-scale=1.

z.B.

<meta name="viewport" content="width=device-width, minimum-scale=1.0">

  • Wow! Dies hat zwei meiner Fehler behoben : ) Ich war gezwungen, zwischen der Position Sticky für meinen Header und Overflow-X, das im HTML versteckt ist, zu wählen.

    – Costa Michailidis

    20. August 2021 um 8:04 Uhr

Benutzer-Avatar
Dein Gehirn isst dich

wenn du dich beworben hast overflow-x:hidden zum Karosseriebei dem Sie sich vielleicht bewerben möchten html zu.

body,html {
  overflow-x:hidden;
}

  • Wow! Dies hat zwei meiner Fehler behoben : ) Ich war gezwungen, zwischen der Position Sticky für meinen Header und Overflow-X, das im HTML versteckt ist, zu wählen.

    – Costa Michailidis

    20. August 2021 um 8:04 Uhr

Benutzer-Avatar
pierre_loic

Meine Analyse Stand September 2021. Getestet auf Safari und Firefox 37 (iOS 15).

Die akzeptierte Antwort und ihr SO-Link sind ziemlich alt (2013-2014) und scheinen nicht mehr gültig zu sein.
Ich finde auch, dass das Hinzufügen einer “Verpackung” div auf meinem body ist nicht wirklich elegant und könnte zu unerwartetem Verhalten führen.

Die Seite, an der ich arbeite, ist ziemlich einfach, es gibt nur ein Hintergrundbild könnte Überlauf auf der rechten Seite des Bildschirms für kleinere Bildschirme.

  • Bewirbt sich minimum-scale=1 zum viewport Meta-Tag hat nicht funktioniert. Dies verhindert das Herauszoomen, aber ich könnte immer noch diese hässliche Schriftrolle auf der rechten Seite haben.
  • Bewirbt sich overflow-x: hidden; an <html> hat nur nicht funktioniert.
  • Bewirbt sich overflow-x: hidden; an <body> hat nur nicht funktioniert.
  • Bewirbt sich overflow-x: hidden; auf beiden <html> & <body> tat Arbeit.

  • Komisch, es läuft darauf hinaus, dass sich Browserfirmen anscheinend nicht die Mühe machen, dies zu beheben (oder es war immer beabsichtigt, dass mobile Browser diese CSS-Eigenschaften in diesen Tags ausschließen). Schön zu sehen, dass sich diese Bedrohung darauf entwickelt.

    – Dorvalla

    23. September 2021 um 14:09 Uhr


  • Nun, es behebt das Problem immer noch nicht. Hatte das Problem auf einer WP Avada Theme One Page Landing Page. Wenden Sie den meta= View-Port auf die anfängliche, minimale und maximale Skalierung auf 1 an. Und setzen Sie overflow-x:hidden sowohl für body als auch für html. Aber das Problem wird bei kleineren Geräten immer noch nicht gelöst.

    – Lenin

    26. November 2021 um 7:50 Uhr

  • Das hat bei mir funktioniert. Danke für die Analyse

    – PockelHockel

    22. Januar um 10:45 Uhr

1019860cookie-checkÜberlauf-x:versteckt; auf dem mobilen Gerät funktioniert nicht

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy