Debugging Layer Differences Between Chrome, Firefox and Safari

// Paste into each browser's console on the same URL. WHY: if the two engines
// registered different orders, the bug is in the BUILD or the loading, not in
// the cascade — different chunks, a different bundle, or an import that
// resolved differently.
(() => {
  const names = [];
  const walk = (rules) => {
    for (const r of rules) {
      if (r.constructor.name === 'CSSLayerStatementRule') names.push(...r.nameList);
      else if (r.constructor.name === 'CSSLayerBlockRule') {
        if (r.name) names.push(r.name);
        walk(r.cssRules);
      } else if (r.cssRules) walk(r.cssRules);
    }
  };
  for (const s of document.styleSheets) {
    try { walk(s.cssRules); } catch { /* cross-origin — not ours */ }
  }
  return [...new Set(names)];
})();

// Run in both engines on the same element. WHY named longhands: shorthand
// serialisation differs between engines, so `padding` can read differently
// while every side is identical.
const el = document.querySelector('[data-testid="card"]');
JSON.stringify(
  ['paddingTop', 'borderTopWidth', 'color', 'fontFamily', 'display']
    .reduce((acc, p) => ({ ...acc, [p]: getComputedStyle(el)[p] }), {}),
  null, 2
);

/* 1 · DIFFERENT USER-AGENT DEFAULTS
   Safari and Chromium disagree on form-control metrics, and the UA rule is
   only visible when no author rule matches.
   → Fix: an explicit author declaration in `reset`, not a layer change. */

/* 2 · FONT METRICS
   A different fallback font resolves to a different line-height, which shifts
   everything below it.
   → Fix: self-host the font and set an explicit line-height. */

/* 3 · A FEATURE INSIDE THE LAYER, NOT THE LAYER ITSELF
   `@container`, `:has()`, `text-wrap: balance`, `color-mix()` — if a rule
   uses something one engine lacks, that DECLARATION is dropped while the
   layer works perfectly.
   → Fix: check support for the value, not the at-rule. */

/* 4 · A DIFFERENT BUNDLE
   Differential serving, a `@supports` gate, or a polyfilled build for older
   targets means the engines are not running the same CSS at all.
   → Fix: compare the fetched stylesheet URLs, not the source. */

// Cross-engine equivalent of "which layer won": temporarily disable the
// suspected rule and see whether the computed value changes.
// WHY this rather than a DevTools feature: no engine exposes provenance for
// a resolved value, so substitution is the portable technique.
const sheet = [...document.styleSheets].find((s) => s.href?.includes('index.css'));
const rule = [...sheet.cssRules].find((r) => r.cssText?.includes('.card'));
console.log('before', getComputedStyle(el).paddingTop);
rule.style.padding = '';                 // neutralise it in place
console.log('after ', getComputedStyle(el).paddingTop);

# Compare what each engine actually fetched. Different sizes mean different
# bundles, which means the cascade was never the variable.
curl -sI https://example.com/assets/index.css | grep -i "content-length\|etag"

// src/dev/layer-diagnose.js — paste into any console, in any engine.
// WHY one script for all three: the engines' DevTools differ, but the CSSOM
// and getComputedStyle behave identically, so a single output can be compared
// side by side without translating between panels.
export function diagnose(selector) {
  const el = document.querySelector(selector);
  if (!el) return { error: `no element matches ${selector}` };

  // 1 · the registered stack
  const layers = [];
  const walk = (rules) => {
    for (const r of rules) {
      const kind = r.constructor.name;
      if (kind === 'CSSLayerStatementRule') layers.push(...r.nameList);
      else if (kind === 'CSSLayerBlockRule') {
        if (r.name) layers.push(r.name);
        walk(r.cssRules);
      } else if (r.cssRules) walk(r.cssRules);
    }
  };
  for (const s of document.styleSheets) {
    try { walk(s.cssRules); } catch { /* cross-origin */ }
  }

  // 2 · every rule that matches this element, with its layer path
  const matching = [];
  const collect = (rules, path = []) => {
    for (const r of rules) {
      const kind = r.constructor.name;
      if (kind === 'CSSLayerBlockRule') {
        collect(r.cssRules, r.name ? [...path, r.name] : path);
      } else if (r.cssRules && kind !== 'CSSStyleRule') {
        collect(r.cssRules, path);           // @media, @supports, @container
      } else if (r.selectorText) {
        try {
          if (el.matches(r.selectorText)) {
            matching.push({ layer: path.join('.') || '(unlayered)', rule: r.cssText });
          }
        } catch { /* :has() or other selector this engine cannot match */ }
      }
    }
  };
  for (const s of document.styleSheets) {
    try { collect(s.cssRules); } catch { /* cross-origin */ }
  }

  // 3 · the resolved result, in longhands so engines agree on serialisation
  const cs = getComputedStyle(el);
  const computed = {};
  for (const p of ['paddingTop', 'marginTop', 'borderTopWidth', 'color',
                   'backgroundColor', 'fontFamily', 'fontSize', 'lineHeight',
                   'display', 'position']) {
    computed[p] = cs[p];
  }

  // WHY the sheet list: a differing bundle is the most common non-layer cause,
  // and it is invisible unless you look at what was actually fetched.
  const sheets = [...document.styleSheets].map((s) => s.href).filter(Boolean);

  return { engine: navigator.userAgent, layers: [...new Set(layers)],
           sheets, matching, computed };
}