[Bug]: UI Mode snapshot sometimes displays double

[agg23]

Version

1.49.1

Steps to reproduce

1. Create a test containing

await page.goto("https://github.com/");
await page.goto("https://github.com/");

2. Run the test in UI Mode
3. Hover over the entries for the gotos. Sometimes the second entry shows doubled UI elements, offset slightly

Expected behavior

The snapshot display should be clean.

Actual behavior

Additional context

No response

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (6) x64 Intel(R) Core(TM) i5-9500 CPU @ 3.00GHz
    Memory: 2.76 GB / 15.81 GB
  Binaries:
    Node: 20.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
  IDEs:
    VSCode: 1.95.2 - C:\Users\agastineau\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD

[yury-s]

Does it reproduce in trace viewer? If so, can you attach trace file?

[agg23]

Does it reproduce in trace viewer? If so, can you attach trace file?

Good point. trace.zip. It does reproduce in the hosted version of Trace Viewer. It occurs on both Chrome and Firefox.

[agg23]

The current page at https://github.com has a canvas element surrounding the primary content at the top of the page. This is added explicitly in order to render these characters that animate on startup.

<canvas class="lp-IntroVisuals-canvas" data-engine="three.js r148" width="1000" height="950" style="width: 1000px; height: 950px; opacity: 1; transform: scale(1);"></canvas>

Removing this element from the snapshot fixes the issue, which suggests snapshots are not actually capturing the contents of a canvas element at a given position, but rather the entire contents of the page in that bounding box. Additionally, the scaling must be slightly incorrect (non-deterministically?) to cause the doubled vision.

[agg23]

Add a checkbox to Trace Viewer to opt into canvas display.