Shared-chrome CSS factoring merges device-document stylesheets, so phones render the desktop width

Aperta
  • Qualcosa non va?
#4,894 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
css, php
Ambito
frontend, web-dev

Direzione di ricerca

The issue identifies shared-chrome CSS factoring and per-device capture stylesheets as the failing path, but names no source files or tests. Start by tracing where shared-chrome assets are generated and how the head selection script toggles capture stylesheets; compare the behavior before and after the change between commits 635b586240 and fc4576c9ef. Done means device-specific rules stay under the selected document, and the reported iPhone capture resolves to 320px.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Summary

On a capture whose phone layout is nested as a device-only subtree (the #4570/#4611 shape), the head selection script picks a device by switching each per-device capture stylesheet's media between all and not all. On current trunk the shared-chrome CSS factoring breaks that switch. Device-specific rules from the desktop and mobile stylesheets are merged into shared-chrome-*.css files that no longer follow their source document's toggle. On a phone the desktop rules win and the page renders at desktop width.

Evidence

Real Wix site, 10 routes, same capture each time. SSI 1.33.361 with php-transformer/src swapped in. iPhone 13 emulation, home route:

BE build selected document #site-root document.scrollWidth
#4611 head (before) mobile 0..320 320 (matches source)
trunk fc4576c9ef mobile 0..980 980

The page's .data-blocks-engine-capture-desktop-document wrapper resolves --site-width from :where(.blocks-engine-attribute-8b90aa5755b2-0).

Before: these rules live in per-document capture sheets that the selection script toggles:

capture-112a51c4….css  media=all      (mobile sheet: --site-width:320px)
capture-c8c815b9….css  media=not all  (desktop sheet: --site-width:980px)

Trunk:

shared-chrome-6429338ec1e7c14c.css  media=all/not all  (contains BOTH 320px and 980px rules, same selector — last wins)
shared-chrome-8921da39824768c6.css  media=all          (980px, never toggled)

Result: --site-width resolves to 980px with mobile selected, so the page and the phone header band (-330..650) overflow.

Expected

Shared-chrome factoring keeps each rule under its source document's selection. Either factor only rules that are identical across device documents, or keep device-document stylesheets as separately toggled assets. Then the phone page fits at 320px again.

Likely introduced between 635b586240 and fc4576c9ef. Candidates touching shared CSS factoring: #4647, #4656, #4690, #4776.

AI disclosure: diagnosed and filed by Franklin (Claude Opus via Pi/Roadie).

Lingua principale
PHP
Stelle
25
Fork
3
Merge medio
2h 29m
PR unite (30g)
931

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di Automattic/blocks-engine

Tutte le issue di Automattic/blocks-engine

Issue simili

Altre issue su PHP

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.