fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stadionzeitungs-Cover: definite Breite im Swipe-Viewer

Browse Source 
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:
Felix Schneider
2026-07-31 17:31:35 +02:00
parent 05c64c8f12
commit 827a717a02
2 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
CLAUDE.md
View File

@@ -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

28
public/assets/css/components.css
View File

@@ -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;