v158 · css · values & units

Layer editor round-trip

Any tool that edits styles — a page builder, a theme editor, DevTools itself — saves state by reading getComputedStyle back. This miniature layer editor keeps three decorative dots positioned by one background-position list. Hide layers (“performance mode”), save, show them again, restore: on pre-158 engines the hidden layers’ positions were destroyed by the save, and the dots pile up. Chrome 158 round-trips losslessly.

Probing this browser…

The editor

layer positions (x offset)
visible layers (background-image entries)

The position list always declares all three slots; hiding a layer removes only its image entry — exactly the situation Appendix A protects.

Position the dots, hide some layers, save, show them again, restore.

the lossy step, spelled out

// the editor's save routine — what every styling tool does:
saved.position = getComputedStyle(scene).backgroundPosition;

// with layers hidden (1 image) but three declared positions:
// Chrome ≤157 saves "20px 30px"                       ← layers 2+3 GONE
// Chrome 158+ saves "20px 30px, 110px 55px, 200px 80px" ← lossless

// the restore routine writes it straight back:
scene.style.backgroundPosition = saved.position;
// pre-158: the one surviving entry repeats across all three
// images — every dot lands on the same spot.

Note what this page does not claim: on a pre-158 engine the bug is real data loss in the round-trip, and the demo lets it happen visibly instead of patching around it. The fix is the engine change, not cleverer JavaScript — though until 158 is your floor, tools should save the specified value (el.style.backgroundPosition), which was never equalised.

see also