diff --git a/packages/playwright-core/src/server/injected/highlight.ts b/packages/playwright-core/src/server/injected/highlight.ts
index b9fdc8fa3f..329122fbe0 100644
--- a/packages/playwright-core/src/server/injected/highlight.ts
+++ b/packages/playwright-core/src/server/injected/highlight.ts
@@ -65,8 +65,12 @@ export class Highlight {
     this._glassPaneElement.style.pointerEvents = 'none';
     this._glassPaneElement.style.display = 'flex';
     this._glassPaneElement.style.backgroundColor = 'transparent';
-    this._glassPaneElement.style.width = 'inherit';
-    this._glassPaneElement.style.height = 'inherit';
+    const updateGlassPaneDimensions = () => {
+      this._glassPaneElement.style.width = document.documentElement.scrollWidth + 'px';
+      this._glassPaneElement.style.height = document.documentElement.scrollHeight + 'px';
+    };
+    document.addEventListener('resize', updateGlassPaneDimensions);
+    updateGlassPaneDimensions();
     this._glassPaneElement.style.padding = '0';
     this._glassPaneElement.style.margin = '0';
     this._glassPaneElement.style.border = 'none';
diff --git a/tests/page/page-screenshot.spec.ts b/tests/page/page-screenshot.spec.ts
index fe55a21b81..6b2970e70f 100644
--- a/tests/page/page-screenshot.spec.ts
+++ b/tests/page/page-screenshot.spec.ts
@@ -221,6 +221,17 @@ it.describe('page screenshot', () => {
     expect(screenshot).toMatchSnapshot('screenshot-grid-fullpage.png');
   });
 
+  it('should take fullPage screenshots and mask elements outside of it', async ({ page, server }) => {
+    it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/30770' });
+    await page.setViewportSize({ width: 500, height: 500 });
+    await page.goto(server.PREFIX + '/grid.html');
+    const screenshot = await page.screenshot({
+      fullPage: true,
+      mask: [page.locator('.box').nth(144)],
+    });
+    expect(screenshot).toMatchSnapshot('screenshot-grid-fullpage-mask-outside-viewport.png');
+  });
+
   it('should restore viewport after fullPage screenshot', async ({ page, server }) => {
     await page.setViewportSize({ width: 500, height: 500 });
     await page.goto(server.PREFIX + '/grid.html');
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/screenshot-grid-fullpage-mask-outside-viewport-chromium.png b/tests/page/page-screenshot.spec.ts-snapshots/screenshot-grid-fullpage-mask-outside-viewport-chromium.png
new file mode 100644
index 0000000000..9e97bfcedb
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/screenshot-grid-fullpage-mask-outside-viewport-chromium.png differ
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/screenshot-grid-fullpage-mask-outside-viewport-firefox.png b/tests/page/page-screenshot.spec.ts-snapshots/screenshot-grid-fullpage-mask-outside-viewport-firefox.png
new file mode 100644
index 0000000000..361945923b
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/screenshot-grid-fullpage-mask-outside-viewport-firefox.png differ
diff --git a/tests/page/page-screenshot.spec.ts-snapshots/screenshot-grid-fullpage-mask-outside-viewport-webkit.png b/tests/page/page-screenshot.spec.ts-snapshots/screenshot-grid-fullpage-mask-outside-viewport-webkit.png
new file mode 100644
index 0000000000..21668b96ef
Binary files /dev/null and b/tests/page/page-screenshot.spec.ts-snapshots/screenshot-grid-fullpage-mask-outside-viewport-webkit.png differ