Stadionzeitungs-Cover: definite Breite im Swipe-Viewer
Das Cover fehlte am iPhone, Chrome am Desktop zeigte es. Es hatte im Viewer eine eigene Regel mit "max-height: 72vh; width: auto" — und width:auto ist bei inline-size-Containment genau die Falle, die für .stadionzeitung-page schon behoben war: der Inhalt zählt für die eigene Breite per Definition nicht mit. Sichtbar wird der Unterschied, weil .stadionzeitung-viewer__page display:flex ist: auf einem Flex-Kind heißt width:auto "richte dich nach dem Inhalt". Chrome rettet sich über aspect-ratio plus gestreckte Höhe, Safari nicht. Cover und Seite stehen jetzt in EINER Regel mit derselben definiten Breite, damit sie nicht wieder auseinanderlaufen; nur overflow-y bleibt den Seiten vorbehalten. Gemessen bei 390px Viewport: Cover 363x559, identisch zu den Folgeseiten. EHRLICHE GRENZE: Chrome zeigt vor und nach der Änderung dieselben Maße, der Fehler ist im Desktop-Browser nicht reproduzierbar. Die Ursache ist damit begründet, aber nicht bewiesen — Gegenprobe nur am echten Gerät. In CLAUDE.md vermerkt, damit das nächste Mal niemand im Desktop-Browser "verifiziert". Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
This commit is contained in:
11
CLAUDE.md
11
CLAUDE.md
@@ -616,8 +616,15 @@ Tabellen-Legende). Bewusste Ausnahme von der Token-Disziplin (siehe oben): ein b
|
||||
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
|
||||
Containment:** `width: auto` + `max-height` kollabiert eine inline-size-contained Box auf ihr
|
||||
Padding (Inhalt zählt nicht mehr) — im Swipe-Modus bekommt `.stadionzeitung-page` deshalb eine
|
||||
definite Breite (`min(calc(72vh * 148 / 210), 100%)`), nie `width: auto`. Das Cover war der
|
||||
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%)`),
|
||||
nie `width: auto`. **Beide stehen dafür in EINER Regel**, und das ist der Punkt: das Cover hatte
|
||||
als eigene Klasse zunächst nur eine „harmlose Höhen-Deckelung" mit `width: auto` und blieb am
|
||||
iPhone unsichtbar, während Chrome am Desktop es zeigte (31.07.2026). Der Unterschied entsteht,
|
||||
weil `.stadionzeitung-viewer__page` `display: flex` ist: auf einem Flex-Kind heißt `width: auto`
|
||||
„richte dich nach dem Inhalt", Chrome rettet sich über `aspect-ratio` plus gestreckte Höhe,
|
||||
Safari nicht. **Chrome kann diesen Fehler nicht reproduzieren** — wer hier etwas ändert, prüft
|
||||
es an einem echten iOS-Gerät, nicht im Desktop-Browser. Das Cover war der
|
||||
Anfang dieses Prinzips:
|
||||
Kontrast der Schlagzeile kommt aus der flachen Verlauf-Fläche selbst, bewusst **ohne** `text-shadow`:
|
||||
Chrome rendert `text-shadow` auf mehrzeiligem, umbrechendem Text (lange Gegner-Namen) beim
|
||||
|
||||
Reference in New Issue
Block a user