Merge pull request #160 from mean-weasel/fix-safari-complex-screenshots

Fix Safari freezes on complex screenshot pages

Author: neonwatty

e2e/widget.spec.ts

@@ -2991,6 +2991,36 @@ test.describe('Screenshot Crash Prevention (#67)', () => {
     await expect(notice).toBeVisible();
   });
 
+  test('hides full-page and area capture earlier for complex Safari pages', async ({ page }) => {
+    await mockHtmlToImage(
+      page,
+      "function() { throw new Error('html-to-image should not run for Safari complex-page options'); }"
+    );
+    await page.addInitScript(() => {
+      Object.defineProperty(navigator, 'mediaDevices', {
+        value: {},
+        configurable: true,
+      });
+      Object.defineProperty(navigator, 'userAgent', {
+        get: () =>
+          'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/616.1.16 (KHTML, like Gecko) Version/26.4 Safari/616.1.16',
+        configurable: true,
+      });
+    });
+    await page.goto('/test/complex-dom.html?nodes=4000');
+
+    const nodeCount = await page.evaluate(() => document.body.querySelectorAll('*').length);
+    expect(nodeCount).toBeGreaterThanOrEqual(3000);
+    expect(nodeCount).toBeLessThan(10000);
+
+    const host = await navigateToScreenshotOptions(page);
+
+    await expect(host.locator('css=[data-action="element"]')).toBeVisible();
+    await expect(host.locator('css=[data-action="capture"]')).not.toBeAttached();
+    await expect(host.locator('css=[data-action="area"]')).not.toBeAttached();
+    await expect(host.locator('css=p >> text=too complex')).toBeVisible();
+  });
+
   test('offers native viewport capture on very complex secure-context pages', async ({ page }) => {
     const payloads = await trackFeedbackPayloads(page);
     await mockHtmlToImage(

src/widget/index.ts

@@ -1,9 +1,4 @@
-import {
-  FULL_PAGE_DISABLE_THRESHOLD,
-  getDomNodeCount,
-  getRedactionCount,
-  isFullPageDisabled,
-} from './screenshot';
+import { getDomNodeCount, getRedactionCount, isFullPageDisabled } from './screenshot';
 import { runScreenshotCaptureFlow } from './capture-flow';
 import { injectStyles, createModal, showSuccessModal } from './ui';
 import {
@@ -1153,7 +1148,7 @@ async function submitFeedback(root: HTMLElement, config: WidgetConfig, data: Fee
           timestamp: new Date().toISOString(),
           elementSelector: data.elementSelector,
           domNodeCount,
-          fullPageDisabled: domNodeCount >= FULL_PAGE_DISABLE_THRESHOLD,
+          fullPageDisabled: isFullPageDisabled(),
           // Parsed system info
           browser: systemInfo.browser,
           os: systemInfo.os,

src/widget/screenshot.ts

@@ -9,6 +9,7 @@ const DOM_COMPLEXITY_THRESHOLD = 3_000;
 const TRANSPARENT_IMAGE_PLACEHOLDER =
   'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
 export const FULL_PAGE_DISABLE_THRESHOLD = 10_000;
+export const SAFARI_FULL_PAGE_DISABLE_THRESHOLD = DOM_COMPLEXITY_THRESHOLD;
 
 type DisplayMediaOptionsWithCurrentTab = DisplayMediaStreamOptions & {
   preferCurrentTab?: boolean;
@@ -30,7 +31,20 @@ export function getDomNodeCount(): number {
 }
 
 export function isFullPageDisabled(): boolean {
-  return getDomNodeCount() >= FULL_PAGE_DISABLE_THRESHOLD;
+  return getDomNodeCount() >= getFullPageDisableThreshold();
+}
+
+export function getFullPageDisableThreshold(userAgent = navigator.userAgent): number {
+  return isSafariBrowser(userAgent)
+    ? SAFARI_FULL_PAGE_DISABLE_THRESHOLD
+    : FULL_PAGE_DISABLE_THRESHOLD;
+}
+
+export function isSafariBrowser(userAgent = navigator.userAgent): boolean {
+  return (
+    /Safari\//.test(userAgent) &&
+    !/(Chrome|Chromium|CriOS|FxiOS|Edg|EdgiOS|OPR|Opera)\//.test(userAgent)
+  );
 }
 
 export function getPixelRatio(isFullPage: boolean, screenshotScale?: number): number {

test/cropScreenshot.test.ts

@@ -3,8 +3,11 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import {
   getPixelRatio,
   getDomNodeCount,
+  getFullPageDisableThreshold,
   isFullPageDisabled,
+  isSafariBrowser,
   FULL_PAGE_DISABLE_THRESHOLD,
+  SAFARI_FULL_PAGE_DISABLE_THRESHOLD,
   cropScreenshot,
   canCaptureViewportNatively,
   beginViewportCapture,
@@ -109,6 +112,62 @@ describe('isFullPageDisabled', () => {
     );
     expect(isFullPageDisabled()).toBe(false);
   });
+
+  it('uses the lower Safari threshold to avoid expensive full-page captures', () => {
+    const elements = new Array(SAFARI_FULL_PAGE_DISABLE_THRESHOLD).fill(
+      document.createElement('div')
+    );
+    vi.spyOn(document.body, 'querySelectorAll').mockReturnValue(
+      elements as unknown as NodeListOf<Element>
+    );
+    vi.spyOn(navigator, 'userAgent', 'get').mockReturnValue(
+      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/616.1.16 (KHTML, like Gecko) Version/26.4 Safari/616.1.16'
+    );
+
+    expect(isFullPageDisabled()).toBe(true);
+  });
+
+  it('keeps Chromium on the higher full-page threshold', () => {
+    const elements = new Array(SAFARI_FULL_PAGE_DISABLE_THRESHOLD).fill(
+      document.createElement('div')
+    );
+    vi.spyOn(document.body, 'querySelectorAll').mockReturnValue(
+      elements as unknown as NodeListOf<Element>
+    );
+    vi.spyOn(navigator, 'userAgent', 'get').mockReturnValue(
+      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36'
+    );
+
+    expect(isFullPageDisabled()).toBe(false);
+  });
+});
+
+describe('browser-specific full-page thresholds', () => {
+  it('detects Safari without matching Chrome-style user agents', () => {
+    expect(
+      isSafariBrowser(
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/616.1.16 (KHTML, like Gecko) Version/26.4 Safari/616.1.16'
+      )
+    ).toBe(true);
+    expect(
+      isSafariBrowser(
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36'
+      )
+    ).toBe(false);
+  });
+
+  it('returns the Safari complexity threshold for Safari only', () => {
+    expect(
+      getFullPageDisableThreshold(
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/616.1.16 (KHTML, like Gecko) Version/26.4 Safari/616.1.16'
+      )
+    ).toBe(SAFARI_FULL_PAGE_DISABLE_THRESHOLD);
+    expect(
+      getFullPageDisableThreshold(
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36'
+      )
+    ).toBe(FULL_PAGE_DISABLE_THRESHOLD);
+  });
 });
 
 describe('cropScreenshot', () => {