position: fixed , hat eine sehr schlechte performance auf Smartphones/tablet-Geräte beim scrollen
Ich bin mit position: fixed
in meine Website zu beheben, in der Navigationsleiste in der Ansicht-port, genau wie facebook ' s blue bar, aber als wir versucht haben es auf Smartphones/tablet-Geräte (mit Ihren niedrigen Verarbeitung Befugnisse) diese Feste-bar macht einen sehr schlechten Treffer auf Leistung, das macht einen sehr schlechten user-experience beim scrollen,
verwendeten wir einen sehr guten Artikel zu verbessern die Bewegung, und in der Tat Sie es Taten, wie:
- http://www.html5rocks.com/en/tutorials/speed/scrolling/
- http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
- https://github.com/shichuan/javascript-patterns/blob/master/jquery-patterns/window-scroll-event.html
Nachdem eine Menge änderungen basierend auf diesen Artikel, gelangten wir zu dem Punkt, wo position: fixed
ist die einzige Untersuchung, die Links für uns zu erhöhen.
Verfügt die Seite über eine ultra-glatte scrollen, wenn wir es ändern, um position: absolute
. Aber mit der Festsetzung, das scrollen hat ein sehr schlechtes Nachteil der Umfang, in dem es hängen könnte Sie den safari-browser auf dem ipad, wenn das scrollen in eine bestimmte Art und Weise, Sie wussten, wie zu verwenden position: fixed
mit einer guten Leistung auf tablet/mobile Geräte?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Um eine smooth-scrolling in mobile-Gerät, auch wenn mit "position: absolute",
müssen Sie nur hinzufügen, um das Div die css-Attribut
-webkit-overflow-scrolling: touch;
position:fixed
scheinen sehr schlechte Leistung in mobile safariheight: 100%
undposition: fixed
. Ohne, dass CSS scrolling war glitchy und mit ihm bin ich glücklich.Wenn Ihr "tablet/mobile devices", die performance-problem, eine Webkit-engine, die Sie könnte wahrscheinlich finden Sie die Antwort hier: Chrome langsam scrollen mit fester position der Elemente
Schnelle Antwort: versuchen Sie, fügen Sie
-webkit-transform: translateZ(0);
auf fixed-block -.