Keep the day-cycle outline on its own compositing layer

The "Follows the sun" background made the plan crawl in Firefox: 23 MB of
textures per frame, sixteen of about twenty picture-cache tiles thrown
away every frame, nine frames per second. The card's own JavaScript was
idle for 89 % of that.

The cost is the outer outline. It is a triple drop-shadow over the
grouped paper footprint, and although the group holds paper silhouettes
only and never changes on hover or pan, the filter lived in the plan's
own layer — so every repaint of the plan re-ran three blur passes over
the whole sheet. One hint moves the filtered paper into its own layer
and unhooks it from the plan's repaints.

Measured on a demo-stand pan (Chromium, CDP, summed RasterTask): 1456.6
ms against a static background's 96.7 ms before, 84.7 ms against 103.2
ms after. The new smoke measures that ratio and fails above two.

The picture does not change: the outline outside the plan matches byte
for byte and the frame's mean colour moves from 176.59 to 176.66 of 255.
Splitting the layer does move the remaining content onto a different
sub-pixel grid, so the diagonal wall hatch anti-aliases differently and
the four day-cycle baselines are re-taken on the beta candidate.

Issue: #532
User-Visible: yes
This commit is contained in:
Claude
2026-09-11 17:01:04 +00:00
committed by claude[bot]
parent 7a81d41bab
commit ced9b41642
53 changed files with 677 additions and 492 deletions
+12
View File
@@ -2400,6 +2400,18 @@ const MUTANT_DEFINITIONS = [
replace: "const HANDLE_PAINT_ORDER = ['corners', 'edges'] as const;",
}],
},
{
id: 'daycycle-outline-not-promoted',
guard: 'node demo/smoke_daycycle_raster.mjs',
because: 'the day-cycle outline is a triple drop-shadow over the whole sheet; without its own '
+ 'compositing layer every repaint of the plan re-runs three blur passes, and a demo-stand '
+ 'pan costs fifteen times the rasterization of a static background (#532 AC1/AC2)',
patches: [{
file: 'src/styles/plan.styles.ts',
find: ' will-change: filter;\n',
replace: '',
}],
},
{
id: 'align-guides-exclude-dead-source',
guard: 'node demo/smoke_align_guides.mjs',