Neues mobiles Menüpanel bewegt sich langsam und ruckelt auf älteren Geräten

Hallo :waving_hand:

Seit dem Update von UX: improve touch, swipe, panning performance on mobile menus by featheredtoast · Pull Request #23775 · discourse/discourse · GitHub bewegt sich das Menüfeld (Benutzer und Seitenleiste) auf älteren mobilen Android-Geräten viel langsamer als zuvor. Es liegt vielleicht daran, dass die CPU-Leistung dieser Geräte nicht ausreicht, um eine flüssige Bewegung zu ermöglichen.

Auf meinem Gerät Huawei P20 Pro.

Ich habe es jedoch auch auf einem iPhone X getestet, was super flüssig und schnell ist, daher denke ich, dass die CPU das Problem sein wird. Gibt es eine Möglichkeit, die Leistung auf älteren Geräten zu verbessern?

Danke :slightly_smiling_face:

6 „Gefällt mir“

Danke @Don, wir werden uns das ansehen!

2 „Gefällt mir“

Hallo Don, danke für das Feedback!

Ich werde das bald testen lassen. Ich vermute, dass ältere Geräte möglicherweise immer noch die (etwas umständliche) Leistungsoptimierung benötigen, die die Anzahl der Menüpunkte auf 20 reduziert, um reibungslos zu funktionieren – ich werde mich bald darum kümmern.

3 „Gefällt mir“

@Don – nur um weiter zu untersuchen, was getestet werden muss: bemerkst du dies beim Öffnen/Schließen von Menüs durch Tippen (auf Menü + außerhalb von Menü) oder durch Wischen (Halten und Wischgeste)?

2 „Gefällt mir“

Das Menü scheint beim ersten Öffnen reibungslos zu funktionieren. Ich glaube, das liegt daran, dass die Panel-Elemente noch nicht geladen sind. Wenn ich es zum ersten Mal öffne, erscheint oben ein Spinner-Loader. Ich denke, das ist ein gutes Verhalten und vielleicht wäre es cool, den Spinner-Loader immer beim Öffnen zu verwenden. :thinking:

Die anschließenden Öffnungen erfolgen ohne Animationen. Das Schließen ist zufällig (manchmal reibungslos, manchmal verzögert).

Wenn es sich öffnet und ich außerhalb klicke, hinken die Menü-Buttons des Panels normalerweise. Aber diese gleiten zuerst heraus :thinking: Vielleicht passiert das, weil das gesamte Menü-Panel in reverse-row ist und beim Schließen die Klasse entfernt wird, bevor es vollständig herausgleitet und zurück zu row wechselt?

Bearbeitung: Das sind nicht die Buttons (Tabs) des Menü-Panels, sondern nur die Icons vor den Benachrichtigungen. Aber auf dieser Zeile tritt normalerweise eine Verzögerung auf.

Wenn ich eine Geste zum Schließen des Menüs verwende, scheint es reibungslos zu funktionieren.

2 „Gefällt mir“

Update: Es scheint, dass im Firefox-Browser die Menübewegung reibungslos verläuft. Ich habe es auch unter Edge getestet, wo es dasselbe wie unter Chrome ist.

Firefox

Soweit ich das beurteilen kann, liegt die “Langsamkeit” hier am Neurendern der Header und nicht an den Animationen selbst.

Eine Sache, die ich eingeführt habe und die den Eindruck von neuer Langsamkeit erwecken könnte, ist die Slide-out-Animation (diese Animation wurde versehentlich entfernt, als wir unseren neuen Header refaktoriert haben).

Wenn man dem setTimeout etwas Luft zwischen der Animation und der Neurender-Arbeit, die die Widget-Menüs ausführen, gibt, scheint es viel reibungsloser zu laufen, sodass nicht die Animation selbst langsam ist. Mein Verdacht ist daher, dass die Arbeit rund um das Neurendern der Website-Header beim Öffnen/Schließen schuld ist.

Ich frage mich tatsächlich, ob Firefows Umgang mit dem Animationsende-Promise nach dem tatsächlichen Malen der Animation ausgelöst wird (ich ging davon aus, dass dies der Fall ist, als ich die ursprüngliche Änderung kodierte), was erklären könnte, warum es reibungsloser aussieht als Chrome, während Chrome die Neuberechnungsarbeit beginnen lässt, nachdem die Berechnungen der Animation abgeschlossen sind, aber bevor das Animationsende gemalt wird.


EDIT: Ich füge eine Pause mit unserer Runloop hinzu, um den notwendigen Freiraum vor der Animation zu schaffen. Dies sollte die Animation deutlich flüssiger machen: UX: call discourseLater on menu animations by featheredtoast · Pull Request #24168 · discourse/discourse · GitHub

3 „Gefällt mir“

Vielen Dank! Gut bemerkt! :heart_eyes:

2 „Gefällt mir“