Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

[Bug]: Trace viewer pads narrow (phone-sized) snapshots with a checkerboard strip

Closed
  • Is something wrong?
#43,313 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

A pull request for this has already been merged.

  • #43314 by @hoangtaiki — closed without merging
  • #43321 by @pavelfeldman — merged

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
35/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
playwright, typescript
Domain
frontend, testing-qa

Research direction

The issue identifies packages/trace-viewer/src/ui/snapshotTab.tsx and the SnapshotWrapper frame sizing logic. Read the existing sizing code and the test mentioned in the report, then check how 390px and 200px recorded viewports render. Done means the 390px frame matches the viewport and the 200px frame retains a 320px minimum; two linked pull requests are already open or closed against this issue.

Written by the indexing model from the issue text.

Description

Version

main at 606f017a1 (the same line is in the 1.58 viewer)

Steps to reproduce
  1. Record a trace with a phone-sized viewport:
import { chromium } from 'playwright-core';

const browser = await chromium.launch();
const context = await browser.newContext({ viewport: { width: 390, height: 664 } });
await context.tracing.start({ screenshots: true, snapshots: true });
const page = await context.newPage();
await page.setContent('<h1>Hello</h1><button>Go</button>');
await page.getByRole('button', { name: 'Go' }).click();
await context.tracing.stop({ path: 'trace.zip' });
await browser.close();
  1. Open it with npx playwright show-trace trace.zip.
  2. Select the Click action and look at the Snapshot tab (Action, Before or After).

No real website is needed; the same happens with any trace whose viewport is narrower than 480px, for example the viewport of a mobile device descriptor.

Expected behavior

The snapshot fills the browser frame: the frame is as wide as the recorded viewport (390px here).

Actual behavior

The frame is 480px wide while the snapshot iframe is 390px wide, so a 90px checkerboard strip appears beside the page. Measured in the viewer: .snapshot-container has width 480px, the snapshot iframe has width 390px. The strip is about 19% of the frame for a 390px viewport.

Additional context

The frame width comes from SnapshotWrapper in packages/trace-viewer/src/ui/snapshotTab.tsx:

const renderedBrowserFrameSize = {
  width: Math.max(snapshotContainerSize.width, 480),
  height: Math.max(snapshotContainerSize.height + windowHeaderHeight, 320),
};

The minimum was added in #37640 so the browser header does not break around very small snapshots, with the checkerboard marking the out of bounds area. That makes sense for tiny snapshots, but 480 is wider than most phones, so every mobile-width trace gets the strip.

The header (traffic lights, address bar, menu icon) still fits at 320px, so lowering the minimum width to 320 removes the strip for phone widths and keeps the safety net for tiny snapshots. I have a small change with a test (a 390px viewport gives a 390px frame, a 200px viewport keeps the 320px minimum) and can open a PR if that direction is acceptable.

I searched the existing issues and did not find one about this. #37216 is about mobile previews in UI mode, but it is about scrollbars, not this strip.

Environment
System:
    OS: macOS (arm64)
  Browsers:
    Chromium headless shell 156.0.8078.12 (playwright chromium-headless-shell v1249)
  npmPackages:
    playwright-core: built from main at 606f017a1
Screenshot
Image
Dominant language
TypeScript
Stars
97.4k
Forks
6.6k
Avg merge
22h 17m
Merged PRs (30d)
278

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/playwright

All issues in microsoft/playwright

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.