← back to Retrowalls
hero: retire hero-4grid.js collision, keep the R4 alternating hero as sole owner
51baae54fb38f6cc21ce5c3e03cea29b391bba74 · 2026-09-15 17:35:03 -0700 · Steve Abrams
A fleet-sweep had activated the generic hero-4grid.js on retrowalls, which forced
four-square on EVERY load and raced the bespoke inline R4 block over #heroGrid
(nondeterministic content; up to 8 cells in a 2x2 on an append/clear race), defeating
the "alternating" huge<->four-square behavior. Removed the hero-4grid.js <script> tag.
Hardened the surviving R4 block: flip data-hero-mode to four-square only AFTER the 4
cells are painted (kills the empty-grid flash the CSS hid .cinema-bg into), and clear
#heroGrid first (guards against re-hydration double-append). huge stays the server
default + graceful fallback.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UxvvaJ7p6VRZ4RzKDaBXqK
Files touched
Diff
commit 51baae54fb38f6cc21ce5c3e03cea29b391bba74
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Tue Sep 15 17:35:03 2026 -0700
hero: retire hero-4grid.js collision, keep the R4 alternating hero as sole owner
A fleet-sweep had activated the generic hero-4grid.js on retrowalls, which forced
four-square on EVERY load and raced the bespoke inline R4 block over #heroGrid
(nondeterministic content; up to 8 cells in a 2x2 on an append/clear race), defeating
the "alternating" huge<->four-square behavior. Removed the hero-4grid.js <script> tag.
Hardened the surviving R4 block: flip data-hero-mode to four-square only AFTER the 4
cells are painted (kills the empty-grid flash the CSS hid .cinema-bg into), and clear
#heroGrid first (guards against re-hydration double-append). huge stays the server
default + graceful fallback.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UxvvaJ7p6VRZ4RzKDaBXqK
---
public/index.html | 47 ++++++++++++++++++++++-------------------------
1 file changed, 22 insertions(+), 25 deletions(-)
diff --git a/public/index.html b/public/index.html
index c67fdbc..e9677b8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1560,30 +1560,27 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
var prev=parseInt(localStorage.getItem(k)||'0',10);
var next=(prev+1)%2;
localStorage.setItem(k,String(next));
- if (prev>0) {
- var mode = next===0 ? 'huge' : 'four-square';
- document.documentElement.dataset.heroMode = mode;
- if (mode === 'four-square') {
- // Try to populate four-square from existing product list (newest 4)
- fetch('/api/products?limit=4&page=1').then(r=>r.ok?r.json():null).then(j=>{
- if (!j || !j.items || j.items.length < 4) {
- document.documentElement.dataset.heroMode = 'huge';
- console.warn('dw-hero-stale: insufficient items for four-square, falling back to huge');
- return;
- }
- var grid = document.getElementById('heroGrid');
- if (!grid) return;
- j.items.slice(0,4).forEach(function(it){
- var d = document.createElement('div');
- d.className = 'cell';
- var img = (it.image_url || it.image || '/hero-bg.jpg');
- d.style.backgroundImage = "url('" + img + "')";
- grid.appendChild(d);
- });
- }).catch(function(){
- document.documentElement.dataset.heroMode = 'huge';
+ if (prev>0 && next===1) {
+ // four-square visit: stay on the server default (huge) until the 4 cells are
+ // painted, THEN flip data-hero-mode. Both modes share .cinema min-height, so the
+ // swap is CLS-free AND flash-free (never shows an empty grid / hidden .cinema-bg).
+ fetch('/api/products?limit=4&page=1').then(r=>r.ok?r.json():null).then(j=>{
+ if (!j || !j.items || j.items.length < 4) {
+ console.warn('dw-hero-stale: insufficient items for four-square, staying on huge');
+ return; // stays huge — server default already rendered
+ }
+ var grid = document.getElementById('heroGrid');
+ if (!grid) return;
+ grid.innerHTML = ''; // guard: never double-append onto an existing grid
+ j.items.slice(0,4).forEach(function(it){
+ var d = document.createElement('div');
+ d.className = 'cell';
+ var img = (it.image_url || it.image || '/hero-bg.jpg');
+ d.style.backgroundImage = "url('" + img + "')";
+ grid.appendChild(d);
});
- }
+ document.documentElement.dataset.heroMode = 'four-square'; // flip after cells ready
+ }).catch(function(){ /* keep huge */ });
}
} catch(e) { /* localStorage disabled — keep server default (huge) */ }
})();
@@ -1597,8 +1594,8 @@ document.addEventListener('DOMContentLoaded', function(){ try { renderRailSectio
<!-- corner-nav disabled (UL-hamburger rebuild) -->
<script src="/sku-redact.js" defer></script>
-<!-- hero4-fix: activate 2x2 hero (self-contained; was commented placeholder) -->
-<script src="/hero-4grid.js" defer></script>
+<!-- hero-4grid.js removed: it forced four-square on every load + raced the inline R4
+ block over #heroGrid. The bespoke R4 alternating-hero block above is the single owner. -->
<!-- DW network ad slot -->
<script src="https://ads.agentabrams.com/embed.js" data-slot="footer-strip"></script>
</body>
← c81f9bd Standardize privacy policy to /privacy.html + footer link (A
·
back to Retrowalls
·
(newest)