.c-reflection, .m-reflection, .p-reflection { background-position: var(--refl-xpos) var(--inv-refl-ypos); } .c-refl-highlight-masked-2, .c-refl-highlight-masked-4 { position: absolute; inset: 0; pointer-events: none; background-color: transparent; /* Essential for the multiply math */ /* Order is important: Gradient on top, Texture on bottom */ background-image: radial-gradient(circle 30vw at var(--inv-refl-xpos) var(--inv-refl-ypos), white 0%, black 90%), var(--canvas-refl-mask); background-repeat: repeat, repeat; background-size: 100% 100%, var(--canvas-size); } .c-refl-highlight-overlay { background-position: var(--refl-xpos) var(--refl-ypos); } .soft-light-fade { background-image: radial-gradient(circle 800px at var(--inv-refl-xpos) var(--inv-refl-ypos), white, black); } .new-canvas, .canvas-border { background-size: calc(var(--canvas-size) * 2); background-image: var(--canvas-texture); } .p-texture { background-size: calc(var(--paper-size)); } .wall-texture { background-size: calc(var(--one-inch) + 50px); transition: background-size 200ms ease; } /* ========================================================================== Substrate layer gating — Safari memory -------------------------------------------------------------------------- These overlays are gated only by `opacity: calc(var(--sub-*))` in Webflow. An opacity-0 element that also has mix-blend-mode or filter still keeps its full compositing backing store in WebKit — and for a blended layer that means a rasterized snapshot of everything beneath it too. So with Canvas selected the browser was also holding the paper and metal stacks, including .p-reflection's blur(60px) + mask-image, the most expensive layer on the page. Chrome merges most of these away, which is why it never showed up there. `display: none` releases the buffers outright. All four targets are inset:0 overlays, so taking them out of flow has no layout effect. CSS can't branch on a numeric custom property, so this keys off data-substrate / data-c-wrap on , set in JS/frame-substrate-var-updates.js. The [data-substrate] guard means nothing is hidden before that JS runs — same rendering as today until it does. ========================================================================== */ html[data-substrate]:not([data-substrate='canvas']) .canvas-group, html[data-substrate]:not([data-substrate='paper']) .p-reflection, html[data-substrate]:not([data-substrate='metal']) .m-reflection, html[data-c-wrap]:not([data-c-wrap='1']) .inner-shadow-c-wrap { display: none; } /* wrapper: blur the final composited pixels */ .refl-blur { display: inline-block; filter: blur(0px); overflow: visible; /* avoid clipping the blur */ transform: translateZ(0); /* Safari/WebKit stability */ }