fix: safari renders images correctly (#753)

* fix: safari rendering images

* test: run safari/webkit e2e tests

* chore: lint fix and minor cleanup

* chore: install playwright deps for webkit tests

* chore: attempt to run webkit test on macos-latest

* Revert "chore: attempt to run webkit test on macos-latest"

This reverts commit 9f08bdd.

* chore(ci): webkit caches playwright deps and uploads test artifacts

* chore(ci): playwright project test-results use unique artifact name

* chore(ci): webkit->safari so playwright tests dont run in CI

Author: SgtPooki

.github/workflows/main.yml

@@ -86,7 +86,7 @@ jobs:
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: playwright-debug
+          name: playwright-debug-chrome
           path: test-results
 
   test-chrome-webworker:
@@ -153,11 +153,27 @@ jobs:
         with:
           node-version: lts/*
       - uses: ipfs/aegir/actions/cache-node-modules@main
+      - name: Cache Playwright dependencies
+        id: playwright-cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            playwright-${{ runner.os }}-
+      - run: npx playwright install --with-deps
+        timeout-minutes: 10 # should take no longer than 2min
       - run: npm run --if-present test:webkit
       - uses: codecov/codecov-action@b9fd7d16f6d7d1b5d2bec1a2887e65ceed900238 # v4.6.0
         with:
           flags: webkit
           files: .coverage/*,packages/*/.coverage/*
+      - name: Upload Playwright artifacts
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-debug-webkit
+          path: test-results
 
   test-electron-main:
     needs: build

package-lock.json

@@ -28,10 +28,11 @@
     "pretest:all": "run-s build",
     "test:all": "cross-env SHOULD_BUILD=false run-s 'test:iso -- -b false' 'test:node -- -b false' test:browsers",
     "test:iso": "aegir test -f dist-tsc/test/**/*.spec.js",
-    "test:browsers": "playwright test -c playwright.config.js --project chromium firefox no-service-worker",
+    "test:browsers": "playwright test -c playwright.config.js --project chromium firefox webkit no-service-worker",
     "test:chrome": "playwright test -c playwright.config.js --project chromium",
     "test:no-sw": "playwright test -c playwright.config.js --project no-service-worker",
     "test:firefox": "playwright test -c playwright.config.js --project firefox no-service-worker",
+    "test:safari": "playwright test -c playwright.config.js --project safari",
     "test:deployed": "playwright test -c playwright.config.js --project deployed",
     "test:local-binary": "concurrently -k --success first -n \"binary,tests\" \"npm run start\" \"cross-env SHOULD_BUILD=false BASE_URL='http://localhost:3000' playwright test -c playwright.config.js --project deployed no-service-worker\"",
     "test:inbrowser-dev": "cross-env BASE_URL='https://inbrowser.dev' playwright test -c playwright.config.js --project deployed",

package.json

@@ -59,6 +59,13 @@ export default defineConfig({
         ...devices['Desktop Firefox']
       }
     },
+    {
+      // NOTE: github CI isn't running these tests successfully, but they work locally.
+      name: 'safari',
+      use: {
+        ...devices['Desktop Safari']
+      }
+    },
     /**
      * Test a deployed site such as inbrowser.dev with `BASE_URL="https://inbrowser.dev" npm run test:deployed`
      * or inbrowser.link with `BASE_URL="https://inbrowser.link" npm run test:deployed`

playwright.config.js

@@ -557,7 +557,15 @@ async function fetchHandler ({ path, request, event }: FetchHandlerArg): Promise
       return await errorPageResponse(response)
     }
 
-    return response
+    // Create a completely new response object with the same body, status, statusText, and headers.
+    // This is necessary to work around a bug with Safari not rendering content correctly.
+    const newResponse = new Response(response.body, {
+      status: response.status,
+      headers: response.headers,
+      statusText: response.statusText
+    })
+
+    return newResponse
   } catch (err: unknown) {
     log.trace('fetchHandler: error: ', err)
     const errorMessages: string[] = []

src/sw.ts

@@ -34,6 +34,11 @@ test.describe('ipfs-sw configuration', () => {
   })
 
   test('root config is propagated to subdomain', async ({ page, baseURL, rootDomain, protocol }) => {
+    if (test.info().project.name === 'webkit') {
+      // @see https://github.com/ipfs/in-web-browsers/issues/206
+      test.skip()
+      return
+    }
     await page.goto(baseURL, { waitUntil: 'networkidle' })
     await waitForServiceWorker(page, baseURL)
     // set the config on the root..

test-e2e/config-loading.test.ts

@@ -38,6 +38,12 @@ test.describe('first-hit ipfs-hosted', () => {
   })
 
   test.describe('subdomain-routing', () => {
+    test.beforeAll(async () => {
+      if (test.info().project.name === 'webkit') {
+        // @see https://github.com/ipfs/in-web-browsers/issues/206
+        test.skip()
+      }
+    })
     test('redirects to ?helia-sw=<path> are handled', async ({ page, rootDomain, protocol }) => {
       const response = await page.goto('http://localhost:3334/ipfs/bafkqablimvwgy3y')
 
@@ -101,6 +107,12 @@ test.describe('first-hit direct-hosted', () => {
   })
 
   test.describe('subdomain-routing', () => {
+    test.beforeAll(async () => {
+      if (test.info().project.name === 'webkit') {
+        // @see https://github.com/ipfs/in-web-browsers/issues/206
+        test.skip()
+      }
+    })
     test('requests to new pages are redirected', async ({ page, rootDomain, protocol }) => {
       const response = await page.goto(`${protocol}//${rootDomain}/ipfs/bafkqablimvwgy3y`, { waitUntil: 'commit' })
 

test-e2e/first-hit.test.ts

@@ -130,6 +130,16 @@ export const testSubdomainRouting = test.extend<{ rootDomain: string, baseURL: s
   rootDomain: [rootDomain, { scope: 'test' }],
   protocol: [baseURLProtocol, { scope: 'test' }],
   page: async ({ page, baseURL }, use) => {
+    /**
+     * if safari, skip subdomain routing tests
+     *
+     * @see https://github.com/ipfs/in-web-browsers/issues/206
+     */
+    if (test.info().project.name === 'webkit') {
+      testSubdomainRouting.skip()
+      return
+    }
+
     await page.goto(baseURL, { waitUntil: 'networkidle' })
     await waitForServiceWorker(page, baseURL)
 

test-e2e/fixtures/config-test-fixtures.ts

@@ -13,6 +13,12 @@ test.describe('subdomain-detection', () => {
     routers.push(process.env.KUBO_GATEWAY)
   })
   test('path requests are redirected to subdomains', async ({ page, baseURL, rootDomain, protocol }) => {
+    if (test.info().project.name === 'webkit') {
+      // @see https://github.com/ipfs/in-web-browsers/issues/206
+      test.skip()
+      return
+    }
+
     await page.goto(baseURL, { waitUntil: 'networkidle' })
     await waitForServiceWorker(page, baseURL)
     await setConfig({