Responsives Verhalten auf iPad Pro 11" & Allgemein Tablets

Grischabock · Aug 24th 2019

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

**Joshua Rüsweg** · Aug 25th 2019

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

Grischabock · Aug 25th 2019

Hallo Josh

Klasse das hat funktioniert, Vielen Dank!

Was mir aber aufgefallen ist, ich habe beim wischen nach unten keinen flüssigen Bildlauf mehr. Konntest du das auch feststellen bei dir? Cache ist geleert aber der schubs nach unten klappt einfach nicht mehr

**Joshua Rüsweg** · Aug 27th 2019

Hallo,

Passe deinen Stil mal so an, dann funktioniert das Scrollen auch wieder „Smooth“:

Code

body, html {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

Grüße

Josh

**Alexander Ebert** · Aug 27th 2019

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:

Overflow-Anweisung wieder entfernen.
So lange Elemente per Inspector aus dem DOM entfernen, bis der Overflow verschwindet.
Erstes Ergebnis: Sobald #pageHeaderContainer weg ist, verschwindet reprodzierbar der Overflow.
Weiter gehts: #pageHeaderPanel führt zum Overflow.
.mainMenu sichtbar: Overflow, Menü weg = Kein Overflow, also im Menü weiter schauen.
.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.

Grischabock · Aug 27th 2019

O.o Danke vielmals so gefällt mir das sehr.

Vielen Dank Joshua Rüsweg

Alexander Ebert Dnake für die Tipps, werde ich aufjedenfall anschauen spätestens am Wochenende um zu sehen was es noch sein kann. Als Übergang klappt es so jetzt mal vorerst.

Responsives Verhalten auf iPad Pro 11" & Allgemein Tablets

Participate now!

Share

Tags