Canvas is not shown on Safari with version 1.15.0 or later

[megos]

The problem

Canvas (serialized image) is not shown on Safari. This is not happening on other browsers.

Environment

• Node version: 20.0.0
• @percy/cli version: 1.24.0
• Version of Percy SDK you’re using: N/A
• If needed, a build or snapshot ID: https://percy.io/megos/safari-test/builds/27007163
• OS version: Ubuntu 22.04 (GitHub Actions)
• Type of shell command-line [interface]: bash

Debug logs

``` > percy snapshot --verbose public/ [percy:config] Found config file: .percy.yaml (0ms) [percy:config] Using config: { version: 2, snapshot: { widths: [ 375 ] } } (16ms) [percy:core:browser] Launching browser (24ms) [percy:core:browser] Browser connected [12412]: HeadlessChrome/96.0.4664.0 (458ms) [percy:core] Percy has started! (0ms) [percy:core:snapshot] --------- (87ms) [percy:core:snapshot] Received snapshot: /index.html (0ms) [percy:core:snapshot] - url: http://localhost:50852/index.html (0ms) [percy:core:snapshot] - widths: 375px (0ms) [percy:core:snapshot] - minHeight: 1024px (0ms) [percy:core:snapshot] - disableShadowDOM: false (0ms) [percy:core:snapshot] - discovery.allowedHostnames: localhost (0ms) [percy:core] Discovering resources: /index.html (1ms) [percy:core:page] Page created (7ms) [percy:core:page] Resize page to 375x1024 @1x (289ms) [percy:core:page] Navigate to: http://localhost:50852/index.html (5ms) [percy:core:discovery] Handling request: http://localhost:50852/index.html (19ms) [percy:core:discovery] Processing resource: http://localhost:50852/index.html (36ms) [percy:core:page] Page navigated (60ms) [percy:core:page] Taking snapshot: /index.html (0ms) [percy:core:discovery] Wait for 100ms idle (1ms) [percy:core:discovery] - sha: c190d364f2f9c0bd79d23e8ba85653d865cc13bb942a08de494bb43c08a68d96 (4ms) [percy:core:discovery] - mimetype: text/html (0ms) [percy:core:page] Inject @percy/dom (107ms) [percy:core:page] Serialize DOM (7ms) [percy:core] Snapshot taken: /index.html (7ms) [percy:client] Creating a new build... (1ms) [percy:core:page] Page closed (133ms) [percy:client] Creating snapshot: /index.html... (1429ms) [percy:client] Uploading resources for 27088426... (318ms) [percy:client] Uploading resource: http://localhost:50852/index.html... (0ms) [percy:client] Uploading resource: /percy.1683099425133.log... (0ms) [percy:client] Finalizing snapshot 1506915756... (688ms) [percy:core:browser] Closing browser (285ms) [percy:core:browser] Browser closed (25ms) [percy:client] Finalizing build 27088426... (1ms) [percy:core] Finalized build #24: https://percy.io/megos/safari-test/builds/27088426 (252ms) ```

Code to reproduce issue

• Working: https://github.com/megos/percy-canvas-test-on-safari/tree/main
• Not working: https://github.com/megos/percy-canvas-test-on-safari/pull/2

[github-actions[bot]]

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[itsjwala]

hey @megos can you try enabling javascript?

snapshot:
  enable-javascript: true

[megos]

@itsjwala Canvas is shown when enable-javascript is true. Snapshot

But if this option is set to false, I expect the serialized data URI canvas image to be shown.

I created a sample without JavaScript. https://github.com/megos/percy-canvas-test-on-safari/tree/html-only

Only on Safari, you can see the Blue question mark icon that appears when the image failed to load. Snapshot

This behavior of not showing images only in Safari is similar to this #1227.

[itsjwala]

• Currently a limitation of Safari that it doesn't load localhost domain resources
• As a workaround you can try using domTransformation
  • you can pass the following argument to your percySnapshot function in latest version and it should work.

    domTransformation: "(documentElement) =>  documentElement.querySelector('img').forEach(img => { if(img.src.includes('__serialized__') img.src = img.src.replace('localhost', 'local'))})"

[shahidk8]

The issue is fixed on versions 1.26.1 onwards. Please update to latest release of percy/cli.

[megos]

@shahidk8 Thanks!