From 827a717a02c76fdea6b76884d9b5767a1f8a493d Mon Sep 17 00:00:00 2001 From: fs Date: Fri, 31 Jul 2026 17:31:35 +0200 Subject: [PATCH] Stadionzeitungs-Cover: definite Breite im Swipe-Viewer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7 --- CLAUDE.md | 11 +++++++++-- public/assets/css/components.css | 28 ++++++++++++++++++++-------- 2 files changed, 29 insertions(+), 10 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 016b164..1f7a807 100644 --- a/CLAUDE.md +++ b/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 diff --git a/public/assets/css/components.css b/public/assets/css/components.css index c266501..ab82370 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -5593,10 +5593,24 @@ a.match-row__link:hover { bloße Padding kollabieren (der Inhalt zählt beim Containment per Definition nicht mit — reproduzierbar 48px schmale Seiten). min() hält die Seite auf schmalen Viewports in der Track-Breite. */ -.stadionzeitung-viewer.is-enhanced .stadionzeitung-page { + 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 + hier `width: auto` und blieb am iPhone unsichtbar, während Chrome am Desktop es + zeigte (31.07.2026). Der Grund für den Unterschied: .stadionzeitung-viewer__page + ist `display: flex`, und auf einem Flex-Kind heißt `width: auto` „richte dich nach + dem Inhalt" — Chrome rettet sich über aspect-ratio plus gestreckte Höhe zu einem + Wert, Safari nicht. Zusammen in EINER Regel, damit die beiden nicht wieder + auseinanderlaufen; nur das interne Scrollen bleibt den Seiten vorbehalten (das + Cover ist `overflow: hidden`, sein Spielerfoto darf randabfallend beschnitten + werden). */ +.stadionzeitung-viewer.is-enhanced .stadionzeitung-page, +.stadionzeitung-viewer.is-enhanced .stadionzeitung-cover { width: min(calc(72vh * 148 / 210), 100%); max-width: none; aspect-ratio: 148 / 210; +} + +.stadionzeitung-viewer.is-enhanced .stadionzeitung-page { overflow-y: auto; } @@ -5691,13 +5705,11 @@ body.is-sz-full .back-to-top { } } -/* Cover hat die aspect-ratio schon fest (siehe .stadionzeitung-cover) — im - Swipe-Modus nur dieselbe Höhen-Deckelung wie die anderen Live-Seiten. */ -.stadionzeitung-viewer.is-enhanced .stadionzeitung-cover { - max-height: 72vh; - width: auto; - max-width: none; -} +/* Die frühere Cover-Sonderregel (max-height: 72vh; width: auto) stand hier und war + der Grund, warum das Cover am iPhone fehlte — siehe die gemeinsame Regel weiter + oben bei .stadionzeitung-page. Nicht wieder einführen: „nur eine Höhen-Deckelung" + klingt harmlos, erzeugt auf einem Flex-Kind mit inline-size-Containment aber eine + Breite von null. */ .stadionzeitung-viewer__print { display: flex;