diff --git a/packages/core/src/runtime/captureMotionBlur/index.ts b/packages/core/src/runtime/captureMotionBlur/index.ts index 460effbf72f..65a087247f0 100644 --- a/packages/core/src/runtime/captureMotionBlur/index.ts +++ b/packages/core/src/runtime/captureMotionBlur/index.ts @@ -182,8 +182,8 @@ function createInstance(host: CaptureMotionBlurHost, config: Config, form: HtmlI `[${HIDE_ATTR}] { opacity: 0 !important; }`, // The root stays visible: a rotated or scaled mover under a hidden root is captured at the origin, untransformed. `[${ONLY_ATTR}] { background: none !important; border-color: transparent !important; box-shadow: none !important; outline-color: transparent !important; }`, - `[${ONLY_ATTR}]::before, [${ONLY_ATTR}]::after, [${ONLY_ATTR}] * { visibility: hidden !important; }`, - `[${ONLY_ATTR}] [${MOVER_ATTR}], [${ONLY_ATTR}] [${MOVER_ATTR}] * { visibility: visible !important; }`, + `[${ONLY_ATTR}]::before, [${ONLY_ATTR}]::after, [${ONLY_ATTR}] *:not([${MOVER_ATTR}], [${MOVER_ATTR}] *) { visibility: hidden !important; }`, + `[${ONLY_ATTR}] [${MOVER_ATTR}] { visibility: visible !important; }`, ].join("\n"); let movers: HTMLElement[] = []; diff --git a/packages/engine/src/services/captureMotionBlur.pixels.browser.test.ts b/packages/engine/src/services/captureMotionBlur.pixels.browser.test.ts index c7dc0667a2d..7566ad1b5d6 100644 --- a/packages/engine/src/services/captureMotionBlur.pixels.browser.test.ts +++ b/packages/engine/src/services/captureMotionBlur.pixels.browser.test.ts @@ -268,6 +268,21 @@ describe.skipIf(!hasBrowser)("capture motion blur pixels in Chrome", () => { }, ); + it("keeps a visibility:hidden child of a mover out of the trail", async (ctx) => { + if (!supported) ctx.skip(); + const body = `
`; + const blurred = await frameOf(body, true, FRAME, "capture"); + expect(blurred.report).toMatchObject({ state: "on", tier: "capture", movers: 1 }); + let green = 0; + for (let y = 0; y < H; y++) { + for (let x = 0; x < W; x++) { + const [r = 0, g = 0, b = 0] = px(blurred.frame, x, y); + if (g - r > 30 && g - b > 30) green++; + } + } + expect(green).toBe(0); + }); + it("blurs with filters where capture cannot run, over a page that has a WebGL canvas", async (ctx) => { if (!supported) ctx.skip(); const gl = ``;