Swipe-Viewer: alle Seiten wieder einheitlich A5 (kaputter Kommentar)

Am Handy waren die Seitenhöhen beim Durchwischen unterschiedlich: 350 bis 559px
je Inhalt, statt einheitlich 515. Nur Cover, Vorwort, Termine und Sportheim
trafen A5 — die vier haben eine eigene aspect-ratio.

Ursache war ein Fehler von mir aus dem vorigen Commit: der ergänzte Kommentar
landete HINTER dem schließenden */ des bestehenden. Damit stand roher Text vor
der Regel, und der CSS-Parser verwarf den kompletten Block
".stadionzeitung-viewer.is-enhanced .stadionzeitung-page, … { aspect-ratio }".
Der Browser meldete aspect-ratio: auto, obwohl die Regel im ausgelieferten CSS
stand und der Selektor per matches() passte — genau das Bild, das ein
verworfener Block erzeugt. Ein Testlauf mit aspect-ratio: 1/3 änderte nichts,
was den Verdacht bestätigte. php -l prüft CSS nicht, es gab also keinen
Hinweis.

Dass es vor der align-items-Änderung einheitlich aussah, war Zufall: der
Flex-Default stretch streckte alle Seiten auf dieselbe Zeilenhöhe (559) und
verdeckte damit, dass die A5-Regel nie griff.

Zusätzlich sind die Bild-Seiten (Anzeigen) jetzt in derselben A5-Regel. Sie
leiteten ihre Höhe aus dem eigenen Bildverhältnis ab; drei Motive sind
1440x2037 statt 1440x2043 und waren dadurch 513 statt 515px hoch, was beim
Wischen als Sprung auffiel. object-fit: cover fängt die 0,4% Abweichung ab,
wie die Druckfassung es ohnehin tut.

Gemessen: 40 von 40 Seiten 363x515 bei 390px Viewport. Zwei Seiten brauchen
dort internen Scroll (Ergebnisse +44px, Vorschau +11px), weil lange
Vereinsnamen umbrechen — Textumbruch skaliert nicht mit den cqi-Maßen. Im
Druck ist beides unauffällig, per PDF-Sichtprüfung an der Ergebnisse-Seite
bestätigt: Überschrift, drei Ergebnisblöcke und CTA-Kasten vollständig.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
This commit is contained in:
2026-07-31 19:38:23 +02:00
parent c7b23b9f39
commit e0b2184372
2 changed files with 25 additions and 3 deletions

View File

@@ -638,7 +638,14 @@ bedrucktes Blatt ~140mm) proportional exakt gleich aus — mit rem-Maßen lief d
Kontext über die feste A5-Fläche (reproduzierbar: abgeschnittene Vorwort-Signatur, beschnittene Kontext über die feste A5-Fläche (reproduzierbar: abgeschnittene Vorwort-Signatur, beschnittene
Tabellen-Legende). Bewusste Ausnahme von der Token-Disziplin (siehe oben): ein bedrucktes Tabellen-Legende). Bewusste Ausnahme von der Token-Disziplin (siehe oben): ein bedrucktes
A5-Blatt ist kein responsives Website-Element und braucht eine eigene Skala. `letter-spacing` A5-Blatt ist kein responsives Website-Element und braucht eine eigene Skala. `letter-spacing`
bleibt trotzdem über `--ls-*` (dimensionslose `em`-Vielfache, kein Konflikt). **Falle beim bleibt trotzdem über `--ls-*` (dimensionslose `em`-Vielfache, kein Konflikt). **Falle beim Bauen (31.07.2026):** ein zusätzlicher Kommentar wurde versehentlich HINTER das
schließende `*/` des bestehenden gesetzt. Damit stand roher Text vor der Regel, der CSS-Parser
verwarf den kompletten Regelblock — und die A5-Höhe im Swipe-Viewer war wirkungslos, ohne dass
irgendetwas einen Fehler meldete. Die Seiten fielen dadurch auf Inhaltshöhe zurück und waren 350
bis 559px hoch statt einheitlich 515. **`php -l` prüft CSS nicht**; wer hier etwas ändert, zählt
`/*` gegen `*/` und misst eine Seitenhöhe nach.
**Falle beim
Containment:** `width: auto` + `max-height` kollabiert eine inline-size-contained Box auf ihr Containment:** `width: auto` + `max-height` kollabiert eine inline-size-contained Box auf ihr
Padding (Inhalt zählt nicht mehr) — im Swipe-Modus bekommen `.stadionzeitung-page` **und Padding (Inhalt zählt nicht mehr) — im Swipe-Modus bekommen `.stadionzeitung-page` **und
`.stadionzeitung-cover`** deshalb eine definite Breite (`min(calc(72vh * 148 / 210), 100%)`), `.stadionzeitung-cover`** deshalb eine definite Breite (`min(calc(72vh * 148 / 210), 100%)`),

View File

@@ -5635,7 +5635,8 @@ a.match-row__link:hover {
inline-size-Containment (s. o.) lässt eine auto-Breite sonst auf das inline-size-Containment (s. o.) lässt eine auto-Breite sonst auf das
bloße Padding kollabieren (der Inhalt zählt beim Containment per bloße Padding kollabieren (der Inhalt zählt beim Containment per
Definition nicht mit — reproduzierbar 48px schmale Seiten). min() hält Definition nicht mit — reproduzierbar 48px schmale Seiten). min() hält
die Seite auf schmalen Viewports in der Track-Breite. */ die Seite auf schmalen Viewports in der Track-Breite.
Das COVER steht bewusst im selben Selektor, obwohl es sonst eine eigene Klasse Das COVER steht bewusst im selben Selektor, obwohl es sonst eine eigene Klasse
hat: es ist genauso ein inline-size-Container und war genauso betroffen. Es hatte hat: es ist genauso ein inline-size-Container und war genauso betroffen. Es hatte
hier `width: auto` und blieb am iPhone unsichtbar, während Chrome am Desktop es hier `width: auto` und blieb am iPhone unsichtbar, während Chrome am Desktop es
@@ -5647,12 +5648,26 @@ a.match-row__link:hover {
Cover ist `overflow: hidden`, sein Spielerfoto darf randabfallend beschnitten Cover ist `overflow: hidden`, sein Spielerfoto darf randabfallend beschnitten
werden). */ werden). */
.stadionzeitung-viewer.is-enhanced .stadionzeitung-page, .stadionzeitung-viewer.is-enhanced .stadionzeitung-page,
.stadionzeitung-viewer.is-enhanced .stadionzeitung-cover { .stadionzeitung-viewer.is-enhanced .stadionzeitung-cover,
.stadionzeitung-viewer.is-enhanced .stadionzeitung-page__img {
width: min(calc(72vh * 148 / 210), 100%); width: min(calc(72vh * 148 / 210), 100%);
max-width: none; max-width: none;
aspect-ratio: 148 / 210; aspect-ratio: 148 / 210;
} }
/* Die Bild-Seiten (Anzeigen) leiteten ihre Höhe vorher aus dem EIGENEN
Bildverhältnis ab (width:auto + max-height + object-fit: contain). Die meisten
Motive sind 1440x2043 und damit praktisch A5, drei aber 1440x2037 — die waren
dadurch 513px statt 515px hoch und fielen beim Wischen als Sprung auf
(31.07.2026). Jetzt gilt für sie dieselbe A5-Fläche wie für alle anderen, und
`cover` fängt die 0,4% Verhältnis-Abweichung ab, indem es minimal beschneidet
statt zu verzerren — genau wie die Druckfassung es ohnehin macht. */
.stadionzeitung-viewer.is-enhanced .stadionzeitung-page__img {
height: auto;
max-height: none;
object-fit: cover;
}
.stadionzeitung-viewer.is-enhanced .stadionzeitung-page { .stadionzeitung-viewer.is-enhanced .stadionzeitung-page {
overflow-y: auto; overflow-y: auto;
} }