diff --git a/packages/trace-viewer/src/sw/snapshotRenderer.ts b/packages/trace-viewer/src/sw/snapshotRenderer.ts
index 86fe25f18e..c747961a03 100644
--- a/packages/trace-viewer/src/sw/snapshotRenderer.ts
+++ b/packages/trace-viewer/src/sw/snapshotRenderer.ts
@@ -438,6 +438,16 @@ function snapshotScript(...targetIds: (string | undefined)[]) {
           context.fillRect(0, 0, canvas.width, canvas.height);
         }
 
+
+        if (window.parent.parent !== window.parent) {
+          for (const canvas of canvasElements) {
+            const context = canvas.getContext('2d')!;
+            drawWarningBackground(context, canvas);
+            canvas.title = `Playwright displays canvas contents on a best-effort basis. It doesn't support canvas elements inside an iframe yet. If this impacts your workflow, please open an issue so we can prioritize.`;
+          }
+          return;
+        }
+
         const img = new Image();
         img.onload = () => {
           for (const canvas of canvasElements) {
@@ -451,7 +461,6 @@ function snapshotScript(...targetIds: (string | undefined)[]) {
 
             drawWarningBackground(context, canvas);
 
-            // todo: don't show the image if we're in an iframe - we know it's not going to be accurate
             context.drawImage(img, xStart * img.width, yStart * img.height, (xEnd - xStart) * img.width, (yEnd - yStart) * img.height, 0, 0, canvas.width, canvas.height);
             if (isUnderTest)
               // eslint-disable-next-line no-console
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index 5bc17da8f0..593ad05bd5 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -1452,6 +1452,19 @@ test('canvas clipping', async ({ runAndTrace, page, server }) => {
   await expect(snapshot.locator('canvas')).toHaveAttribute('title', `Playwright couldn't capture full canvas contents because it's located partially outside the viewport.`);
 });
 
+test('canvas clipping in iframe', async ({ runAndTrace, page, server }) => {
+  const traceViewer = await runAndTrace(async () => {
+    await page.setContent(`
+      <iframe src="${server.PREFIX}/screenshots/canvas.html#canvas-on-edge"></iframe>
+    `);
+    await page.waitForTimeout(1000); // ensure we could take a screenshot
+  });
+
+  const snapshot = await traceViewer.snapshotFrame('page.waitForTimeout');
+  const canvas = snapshot.locator('iframe').contentFrame().locator('canvas');
+  await expect(canvas).toHaveAttribute('title', `Playwright displays canvas contents on a best-effort basis. It doesn't support canvas elements inside an iframe yet. If this impacts your workflow, please open an issue so we can prioritize.`);
+});
+
 test.skip('should handle case where neither snapshots nor screenshots exist', async ({ runAndTrace, page, server }) => {
   const traceViewer = await runAndTrace(async () => {
     await page.goto(server.PREFIX + '/one-style.html');