Skip to content

fix(screenshot): neutralize page ::backdrop styles on mask overlay#41524

Open
Skn0tt wants to merge 1 commit into
microsoft:mainfrom
Skn0tt:fix-41504
Open

fix(screenshot): neutralize page ::backdrop styles on mask overlay#41524
Skn0tt wants to merge 1 commit into
microsoft:mainfrom
Skn0tt:fix-41504

Conversation

@Skn0tt

@Skn0tt Skn0tt commented Jun 29, 2026

Copy link
Copy Markdown
Member

Summary

  • The mask overlay (x-pw-glass) is shown via the popover API, putting it in the top layer with a ::backdrop pseudo-element. A broad page rule targeting ::backdrop bled onto it and tinted masked screenshots (regression since 1.59).
  • Neutralize the glass pane ::backdrop from a document-level stylesheet (the host ::backdrop is unreachable from the shadow root), installed in install() and removed in uninstall(). Falls back to a <style> element for Firefox during screenshots.

Alternative to #41505.

Fixes #41504

The mask overlay (x-pw-glass) is shown via the popover API, which places
it in the top layer and gives it a ::backdrop pseudo-element. A broad page
rule targeting ::backdrop bled onto it and tinted the whole viewport during
masked screenshots (regression since 1.59). Neutralize it from a
document-level stylesheet, since the host ::backdrop is unreachable from the
glass pane shadow root.

Fixes: microsoft#41504
@Skn0tt Skn0tt requested a review from dgozman June 29, 2026 13:13
@github-actions

Copy link
Copy Markdown
Contributor

Test results for "MCP"

3 failed
❌ [chrome] › mcp/annotate.spec.ts:110 › should abort annotation when last screenshot is removed @mcp-windows-latest-chrome
❌ [chrome] › mcp/annotate.spec.ts:316 › should annotate via direct browser_annotate MCP call @mcp-windows-latest-chrome
❌ [webkit] › mcp/http.spec.ts:349 › client should receive list roots request @mcp-ubuntu-latest-webkit

7458 passed, 1132 skipped


Merge workflow run.

@github-actions

Copy link
Copy Markdown
Contributor

Test results for "tests 1"

2 failed
❌ [chromium-library] › library/browsercontext-add-init-script.spec.ts:28 › should work without navigation, after all bindings @chromium-ubuntu-22.04-arm-node20
❌ [chromium-library] › library/browsercontext-expose-function.spec.ts:77 › should be callable from-inside addInitScript @chromium-ubuntu-22.04-arm-node20

4 flaky ⚠️ [chromium-library] › library/chromium/chromium.spec.ts:299 › should report intercepted service worker requests in HAR `@frozen-time-library-chromium-linux`
⚠️ [chromium-library] › library/browsertype-connect.spec.ts:714 › run-server › should record trace with sources `@realtime-time-library-chromium-linux`
⚠️ [firefox-library] › library/inspector/cli-codegen-3.spec.ts:224 › cli codegen › should generate frame locators (4) `@firefox-ubuntu-22.04-node20`
⚠️ [firefox-page] › page/page-emulate-media.spec.ts:144 › should keep reduced motion and color emulation after reload `@firefox-ubuntu-22.04-node20`

49175 passed, 1163 skipped


Merge workflow run.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: expect(locator).toHaveScreenshot({ mask: [locators] }) is affected by page backdrop styles

1 participant