Eine Leiste schmaler als ihr Fenster

Jede Seite unseres Panels scrollte bei einer Fensterbreite von 768 Pixeln seitwärts. Acht Pixel zu breit auf Englisch, achtunddreißig auf Rumänisch. Das war schon eine Weile so, in neun Sprachen, auf jeder Route. Diese Zahlen stammen aus einem Durchlauf in zwei Währungsschreibweisen; eine frühere einzelne Messung derselben Kopfleiste kam auf drei.

Die Ursache ist ein Satz, bei dem man leicht nickt und der falsch ist: die Kopfleiste klappte ihren Inhalt nach der Breite des Fensters um.

Das Fenster ist nicht die Leiste

Ab dem mittleren Haltepunkt steht die Seitenleiste neben der Kopfleiste statt hinter einem Hamburger, und sie kostet sechzehn rem. Bei einem Fenster von 768 Pixeln ist die Inhaltsbox der Kopfleiste also 464 Pixel breit. Nicht 768, und auch nicht 736.

Die beiden Regeln, die den Überlauf hätten verhindern sollen, das Ausblenden des Kontonamens und das Schrumpfen der Verbindungspille zu einem Punkt, standen beide auf dem kleinen Haltepunkt: 640 Pixel Fenster. Das sind 128 Pixel früher als die Stelle, an der die Seitenleiste erscheint und ihre sechzehn rem mitnimmt. Zwischen diesen beiden Zahlen liegt ein Band, in dem die Kopfleiste reichlich Platz zu haben glaubt und tatsächlich weniger hat als bei jeder schmaleren Breite, denn bei 640 war die Seitenleiste noch verborgen.

Das ist kein Tailwind-Problem und kein Haltepunkt, der eine Stufe zu niedrig saß. Es ist ein Kategorienfehler. Eine Medienabfrage beantwortet, wie groß das Sichtfeld ist. Die Frage, die die Kopfleiste beantwortet haben will, lautet, wie viel Platz sie bekommen hat, und bis es Containerabfragen gab, ließ sie sich nicht stellen.

Messen Sie, was die Zeile verlangt, nicht was sie tut

An dieser Stelle liegt die Versuchung nahe, den Haltepunkt ein Stück anzuheben und zu schauen, was passiert. Das ergibt eine Zahl, die auf der Maschine dessen funktioniert, der sie angehoben hat.

Eine Flexzeile schrumpft ihre Kinder auf deren Mindestinhaltsbreite, bevor irgendetwas überläuft, also ist das, was Sie auf dem Bildschirm sehen, das Endsymptom und nicht die Messung. Eine Zeile kann weit über ihrem Budget liegen und trotzdem gut aussehen, genau bis ein Kind nicht weiter schrumpfen kann. Die Zahl, nach der man steuert, ist das, was die Zeile verlangt, wenn nichts sie einschränkt: klonen, auf maximale Inhaltsbreite stellen und ablesen, in jeder Sprache.

Bei 768 Pixeln in der breiteren Währungsschreibweise über neun Sprachen gemessen, ergeben sich die Posten so.

Daraus fallen zwei Schwellen, und beide sind gegen die Inhaltsbox der Kopfleiste formuliert statt gegen das Fenster. Den Kontonamen zu zeigen verlangt 524 Pixel, er beginnt also bei 34 rem, mit zwanzig Pixeln Luft. Die Pille statt des Punkts verlangt 622,8, sie beginnt also bei 40 rem, mit siebzehn. Unterhalb der Namensschwelle verlangt die Zeile 422,3 Pixel, und das passt bequem in die 464, die sie bekommt.

Das Angenehme daran, eine Containerfrage statt einer Fensterfrage zu stellen, ist das, was danach ohne eine weitere Zeile geschieht. Ist die Seitenleiste zu einer Schiene eingeklappt, lässt dasselbe Fenster von 768 Pixeln 656 Pixel Kopfleiste übrig, und Name und Pille kommen von selbst zurück. Nichts weiß etwas von der Schiene; die Leiste hat sich einfach neu vermessen.

Die Sprache mit null Pixeln Überlauf

Der Durchlauf, der diese Klasse von Defekten fing, misst Dokumentbreite gegen Sichtfeldbreite. Über neun Sprachen meldete er überall Überlauf, von acht bis achtunddreißig Pixeln, außer im Französischen, das null meldete.

Dem Französischen fehlte durchaus etwas. Die Verbindungspille war in einer vierundsechzig Pixel hohen Leiste mit mittig ausgerichteten Posten auf eine zweite Zeile umgebrochen, der Text saß also still zur Hälfte außerhalb seiner eigenen Box, während das Dokument genau so breit blieb wie das Fenster. Kein Überlaufdurchlauf sieht das, denn es lief nichts über.

Das ist dieselbe Form wie ein früherer Defekt auf unserer Marketingseite, wo eine einwortige Überschrift in einer geschrumpften Kachel über ihre Nachbarin malte und die Seitenbreite sich nie änderte. Text, der seine Box verlässt, verbreitert das Dokument nicht. Die Prüfung muss also die andere sein: die rechte Kante des Textes gegen die Innenkante der Box, in die er gehört, plus die Zahl der Zeilenkästen, die er belegt. In einer Leiste mit fester Höhe ist mehr als ein Zeilenkasten für sich schon ein Defekt.

Zwei Arten, wie die Messung Sie belügt

Das Messwerkzeug brauchte zwei Anläufe, und beide Fehlschläge wiesen in dieselbe Richtung: auf ein grünes Ergebnis, das nichts bedeutet.

Ein Klon bei maximaler Inhaltsbreite muss innerhalb des Containers gemessen werden. Unserer hing am Dokumentkörper, und der liegt gänzlich außerhalb der Kopfleiste, also traf die Containerabfrage nie zu und der Klon wurde in seiner schmalen Gestalt gezeichnet: 394,8 Pixel, wo die echte Zeile 515,3 verlangte. Als Vorher und Nachher gelesen sieht das genau aus wie eine gelungene Reparatur. Es ist dieselbe Falle wie in Euro zu messen, während der Kunde Dollar sieht, oder eine Seite zu messen, deren Daten nie ankamen: die Zahl ist nicht falsch, sie ist eine Antwort auf eine andere Frage.

Die zweite ist trockener und trotzdem wissenswert. Eine Syntaxprüfung des Durchlaufskripts geht über einen nicht maskierten Backtick in einer Vorlagenzeichenkette hinweg, eine Sonde kann also unmerklich nicht die Sonde sein, die Sie geschrieben haben, während die Datei sauber zerlegt wird.

Deshalb bekam der Durchlauf einen Beweismodus, der absichtlich defekte Elemente in die Kopfleiste hängt, einen Block, der zu breit für die Leiste ist, eine Schaltfläche, die zu schmal für ihre Beschriftung ist, und eine Textzeile, die aus ihrem eigenen Kasten läuft, und verlangt, dass die Sonde jedes davon meldet. Er verlangt außerdem, dass die Kontoschaltfläche überhaupt vorhanden ist. Ein Scanner, der nichts findet, ist von einem Scanner, der nicht hinschaut, nicht zu unterscheiden, und der einzige Weg, sie auseinanderzuhalten, ist, ihm etwas zum Finden zu geben.

Gegen den unreparierten Code lieferte der Durchlauf vierundsiebzig rote Ergebnisse bei achtundneunzig Prüfungen. Gegen die Reparatur, in beiden Währungen, 2033 von 2033.

Kürzen, ohne die Schaltfläche zu zerbrechen

Drei kleinere Entscheidungen in der Reparatur sind genau die Sorte, die jemand später beim Aufräumen zurückdreht, deshalb stehen sie dort geschrieben, wo die Klassen stehen.

Das Kürzen sitzt auf einem Span-Element in der Schaltfläche, nicht auf der Schaltfläche. overflow: hidden auf der Schaltfläche selbst beschneidet deren eigene Klickfläche und deren Fokusring, und das macht aus einer kosmetischen Korrektur einen Mangel in der Tastaturbedienbarkeit.

Der zugängliche Name bleibt vollständig. Kürzen ist eine Darstellungsentscheidung; ein Bildschirmleser sollte den ganzen Organisationsnamen bekommen, also trägt ihn die Beschriftung ungekürzt.

Und genau ein Ding in dieser Zeile darf schrumpfen. Ohne die Symbolschaltflächen festzusetzen, verteilt Flexbox das Schrumpfen auf alle, und man bekommt drei gequetschte Symbolschaltflächen statt eines Namens, der sauber kürzt. Schrumpfen ist eine Entscheidung darüber, wer nachgibt, und trifft man sie nicht, trifft sie die Layoutmaschine für einen, gleichmäßig, was fast nie das ist, was jemand will.

Noch etwas, bevor Sie danach greifen: ein Container erzeugt auch eine Layoutgrenze und wird damit zum umschließenden Block für alles fest Positionierte darunter. Hier ändert das nichts, weil die beteiligten Menüs und Schubladen native Dialoge in der obersten Ebene sind und weil die Leiste bereits einen Hintergrundfilter trug, der genau dieselbe Wirkung hat. Das wurde durch Öffnen geprüft und nicht erschlossen, und wäre die Antwort anders ausgefallen, hätte der Container woanders hingemusst.

Was die letzte Einschränkung aufwirft: der Container gehört in die eine Funktion, die jede Kopfleiste baut, denn die Verwaltungskopfleiste hängt dasselbe Kontomenü ein. Eine Containerabfrage ohne Container trifft nie zu, und zwar still. Setzen Sie sie an einer Stelle und vergessen die andere, und der Kontoname verschwindet aus einem ganzen Teil des Produkts, ohne dass in irgendeinem Protokoll etwas davon zu sehen wäre.

Was wir aufschreiben würden

1. 01Eine Medienabfrage beantwortet eine Frage zum Sichtfeld. Teilt eine Komponente ihre Breite mit einer Seitenleiste, ist das die falsche Frage, und die Antwort ist genau um deren Breite falsch.
2. 02Steuern Sie nach dem, was eine Zeile verlangt, nicht nach dem, was sie tut. Flex schrumpft zuerst die Kinder, der Bildschirm zeigt Ihnen also das Endsymptom.
3. 03Messen Sie den Klon innerhalb des Containers. Außerhalb trifft die Abfrage nicht zu und Sie messen die schmale Gestalt, was sich wie eine Reparatur liest.
4. 04Null Pixel Überlauf können der kaputte Fall sein. Text, der seine Box verlässt, verbreitert das Dokument nicht; prüfen Sie den Text gegen seine eigene Box und zählen Sie die Zeilenkästen.
5. 05Geben Sie dem Scanner etwas zu finden. Ein Beweismodus, der bekannte Defekte pflanzt, ist der einzige Weg, „nichts gefunden“ von „nicht hingeschaut“ zu unterscheiden.
6. 06Kürzen Sie an einem inneren Element. Die Schaltfläche zu beschneiden beschneidet den Fokusring, und der zugängliche Name sollte ganz bleiben.
7. 07Wählen Sie, welches Element schrumpft. Sich selbst überlassen, verteilt Flex den Schmerz gleichmäßig auf alles.

Zur Klarheit: die Reparatur ist gebaut, über neun Breiten, neun Sprachen, fünf Routen und beide Währungen gemessen, und läuft. Sie wurde nicht auf einem Produktionsbuild gemessen, hier steht also nichts über Layoutverschiebung, und es wurde durchgehend ein einziger Organisationsname verwendet.

Aus der Plattformarbeit an Provibr. Die Seite, deren Überlauf das ausgelöst hat, steht in offline neben einer Überschrift, die online sagt, und was neun Sprachen mit einer Reihe fest bemessener Bedienelemente anstellen, steht in sechzehntausend Schlüssel und neun Sprachen.