Hero stats: drop content-visibility from the stat groups so the expand can be measured

OP OpenVibers committed 16 Sept 2026 · 654138717d · 2 files, +6 −2

Each group reported its 120px intrinsic placeholder for two animation frames after being shown,
so the swap measured the board at 602px, animated there, and then snapped to its real 976px. The
rule existed to keep the board off a phone's paint path; collapsing the board by default removes
it from layout entirely, which saves strictly more.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01CMxJm1dB8rdsaMSgNjVa82

Changes

ddiff --git a/public/css/style.css b/public/css/style.css
iindex fe4c4d50..620475ca 100644
---- a/public/css/style.css
++++ b/public/css/style.css
@@@ -14115,7 +14115,11 @@ label.staff-inline-toggle.aiv-field { flex-direction:row; align-items:center; }
         fixed nav over an animated hero is the most expensive thing a phone can paint. */
      .hero-stat--clickable:hover { transform: none; box-shadow: none; }
      .navbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--bg-secondary) !important; }
--    .hero-stat-group { content-visibility: auto; contain-intrinsic-size: 1px 120px; }
++    /* content-visibility was here to keep the stat board off the phone's paint path. The board is
++       now collapsed by default and removed from layout entirely until someone opens it, which is
++       a stronger saving — and leaving this on made the expand animation impossible to measure:
++       each group reported its 120px placeholder height for two frames, so the container animated
++       to 602px and then snapped to its real 976px. */
      .hero-bg-layer.active { animation: none !important; }
  }
  @media (prefers-reduced-motion: reduce) { .hero-chart-svg .bar { animation: none; } .hero-chart, .hero-chart-overlay { animation: none; } }
ddiff --git a/public/index.html b/public/index.html
iindex ea26d358..b76d55b7 100644
---- a/public/index.html
++++ b/public/index.html
@@@ -88,7 +88,7 @@
           overlay) and is fetched without blocking the first paint: media="print" makes the browser
           treat it as non-critical, and the onload flips it back to all once it has arrived. -->
      <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
--    <link rel="stylesheet" href="/css/style.css?v=179">
++    <link rel="stylesheet" href="/css/style.css?v=180">
      <link rel="stylesheet" href="/css/home-fx.css?v=11">
      <link rel="stylesheet" href="/css/home-tour.css?v=7">
      <link rel="stylesheet" href="/css/i18n-star.css?v=5">

diff --git a/public/css/style.css b/public/css/style.css

index fe4c4d50..620475ca 100644

--- a/public/css/style.css

+++ b/public/css/style.css

@@ -14115,7 +14115,11 @@ label.staff-inline-toggle.aiv-field { flex-direction:row; align-items:center; }

fixed nav over an animated hero is the most expensive thing a phone can paint. */

.hero-stat--clickable:hover { transform: none; box-shadow: none; }

.navbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--bg-secondary) !important; }

- .hero-stat-group { content-visibility: auto; contain-intrinsic-size: 1px 120px; }

+ /* content-visibility was here to keep the stat board off the phone's paint path. The board is

+ now collapsed by default and removed from layout entirely until someone opens it, which is

+ a stronger saving — and leaving this on made the expand animation impossible to measure:

+ each group reported its 120px placeholder height for two frames, so the container animated

+ to 602px and then snapped to its real 976px. */

.hero-bg-layer.active { animation: none !important; }

}

@media (prefers-reduced-motion: reduce) { .hero-chart-svg .bar { animation: none; } .hero-chart, .hero-chart-overlay { animation: none; } }

diff --git a/public/index.html b/public/index.html

index ea26d358..b76d55b7 100644

--- a/public/index.html

+++ b/public/index.html

@@ -88,7 +88,7 @@

overlay) and is fetched without blocking the first paint: media="print" makes the browser

treat it as non-critical, and the onload flips it back to all once it has arrived. -->

- <link rel="stylesheet" href="/css/style.css?v=179">

+ <link rel="stylesheet" href="/css/style.css?v=180">