Responsives Verhalten auf iPad Pro 11" & Allgemein Tablets

  • Betroffene Version
    WoltLab Suite 3.1

    Hallo Zusammen

    Ich setze auf meiner Seite einen Stil eines Entwicklers ein. Seit einigen Wochen versuchen wir da ein Problem zu lösen was aber irgendwie bei mir nicht lösbar ist.

    Problem: Auf einem iPad Pro 11" welches eine Auflösung von 2388 x 1668 Pixel bei 264ppi hat, lässt sich die Seite nach links und rechts wischen. Das heisst beim Scrollen verliert man den Content und muss die Seite immer wieder neu zentrieren. Der Grund dafür ist dass bei dieser Auflösung einfach der Mobile Modus bzw. die Mobile Seite nicht geladen wird. Das ganze liegt aber nicht am Apfel Produkt bevor hier wider solche Kommentare auftauchen sondern allgemein an moderneren Tablets mit hoher Auflösung. Das ganze ist auch im Browser am PC im Mobilen Modus zu reproduzieren.

    Durch einiges Testen haben wir dann herausgefunden dass es am Java Sript des Menüs liegt. Auch deaktivierte Menüpunkte werden geladen und verlängern das Menü. Wir haben dann einiges ausprobiert aber leider ohne Erfolg.

    Nutzt man die Pfeile nach rechts oder links dann verschiebt sich die ganze Seite in die gewünschte Richtung.

    Mit dem kommenden Update für iOS Geräte werden viele Tablets den Mobilen Modus umgehen und so denke ich werden durch dieses Verhalten noch mehrere Stile davon betroffen sein. Aus diesem Grund habe ich es mal als Fehler ins normale Core Forum geworfen. Sollte sich das Woltlab Team sicher sein dass es nur am Stil liegt dann kann das Thema gerne in den Stilebereich verschoben werden.

    Folgendes wurde schon getestet (einige beispiele), andere Teile erzeugten selbes verhalten wie unten stehende.

    Code
    .mainMenu {
        overflow-y: hidden;
    }

    Löst das Problem am Tablet aber in der Desktop Version gibt es dann keine Dropdowns mehr.


    Code
    body {
        overflow-x: hidden;
    }

    Dieser Teil bewirkt beim Stilhersteller den richtigen Effekt, bei mir jedoch nichts.


    Code
    .pageHeaderPanel {
        display: none;
    }

    Blendet man nun das ganze Menü einfach mal aus, dann klappt alles. So kann man ja wirklich davon aus gehen dass es sich um das Menü handelt und nicht um eine Transparente Box oder ein Bild bzw. Werbeeinblendungen.


    Getestete Browser

    • Safari unter iOS 12.4
    • Chrome 16.0.3809.123 unter iOS 12.4

    Getestete Geräte

    • iPad Pro 11"
    • Android Tablets (Einige Geräte aus der Community die es bestätigen konnten)

    Betroffene Seite: https://grischabock.ch/

    stil-slide.gif

    Leider klappte der Upload des GIF`s nicht aus dem Grund hier ein Link zu imgur: https://imgur.com/a/xh46DeK

    • Offizieller Beitrag

    Hallo,

    eins vorweg: Ich kann das Problem mit dem Standard-Stil nicht reproduzieren. Hier ist also von einem „Fehler“ im Stil auszugehen.

    Ich konnte das Problem allerdings mit:

    CSS
    body, html {
        overflow-x: hidden;
    }

    bei dir auf der Webseite (zumindest auf dem 12,9" iPad) beheben.

    Bedenke das, wenn du den CSS-Code dem Stil hinzufügst, dass du ggf. einmal den Cache deines iPads löschen musst, damit die neue Style-Datei geladen wird.

    Grüße

    Josh

    • Offizieller Beitrag

    Ein seitlicher Overflow ohne einen unmittelbar sichtbaren Grund ist immer ein Indiz für einen Fehler im CSS. Das Aufspüren ist etwas aufwändiger, aber machbar:

    1. Overflow-Anweisung wieder entfernen.
    2. So lange Elemente per Inspector aus dem DOM entfernen, bis der Overflow verschwindet.
    3. Erstes Ergebnis: Sobald #pageHeaderContainer weg ist, verschwindet reprodzierbar der Overflow.
    4. Weiter gehts: #pageHeaderPanel führt zum Overflow.
    5. .mainMenu sichtbar: Overflow, Menü weg = Kein Overflow, also im Menü weiter schauen.
    6. .boxMenu durch die vielen Einträge erzeugt den Overflow.

    Leider fehlt mir gerade die Zeit, die exakte Ursache noch weiter einzugrenzen, bzw. zu ergründen, weshalb die Items trotz dem overflow: hidden den Platz einnehmen. Eventuell ist es auch ein Rendering-Bug durch irgendeine unglückliche Kombination von CSS.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!