molily: iPhone Scrollbar entfernen

Beitrag lesen

Hallo,

Warum geht denn bei transform position: fixed nicht?

Das ist ein bekannter Bug, der auf auf Desktop-Browsern auftritt.

http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/ legt nahe, dass das durchaus spezifiziertes Verhalten ist.

Ich möchte, dass die Kopfleiste immer oben fixiviert ist

Das kann sie auch, solange das Menü nicht geöffnet ist, sprich, solange transform nicht angewandt ist. Wenn das Menü geöffnet ist, scrollt der Nutzer ohnehin nicht auf der Seite.

Gibt es auch noch Hardware-Beschleuniger für Skalieren von Elementen?!? Wenn mann zum Beispiel nach unten scrollt, soll die Sichleiste kleiner werden, jedoch "ruckelt" dies auch einwenig.

Es gibt transform: scale() bzw. scaleY(), aber das würde das gesamte Element verkleinern bzw. stauchen, das willst du vermutlich nicht.

Ich sehe hier kein technisches, sondern ein konzeptionelles Problem. Entweder die Suchleiste ist so wichtig, dass sie immer gleich sichtbar sein sollte, oder sie kann beim Scrollen zugunsten eines Such-Buttons im Header ausgeblendet werden. Auf das Verkleinern beim Scrollen würde ich verzichten. Das ist ein aktueller Trend, den man hinterfragen sollte. Das funktioniert nur auf Desktop-Browsern und großen Viewports robust und performant, auf Mobile-Browsern und kleinen Viewports verwirrt es eher. Safari unter iOS 7 nutzt dieses Pattern bereits: Alle möglichen Bedienelemente werden beim Scrollen verkleinert und transformiert. Wenn die Website mit fixierten Elementen, die sich beim Scrolling transformieren, noch einen draufsetzt, wird die Seite nicht besser bedienbar.

Mathias