Skip to content

Render the emulated output in Blink and WebKit, not just Chrome #34

Description

@dcondrey

What is missing

scripts/smoke.mjs renders every build in headless Chrome and checks for broken images, horizontal overflow and page errors. Two gaps: it renders the source document rather than the client-transformed one, and Chrome is the only engine, so nothing covers Apple Mail.

Apple is the largest slice by a wide margin — 62.26% of opens against Gmail's 27.03% in Litmus's July 2026 data — and it is the one engine we never render in. (That data is open-pixel based, so Apple MPP inflates it and image-blocking undercounts Outlook desktop. Directionally right, not precise.)

Proposed approach

Feed the transform modes into a render step, and add WebKit.

campaign.html -> --emulate gmail       -> Blink   -> screenshot + structural checks
              -> --emulate outlook-com -> Blink   -> screenshot + structural checks
              -> (untransformed)       -> WebKit  -> Apple Mail approximation

Playwright gives WebKit; puppeteer is Chromium-only, so this means adding Playwright as a dev dependency alongside puppeteer, or migrating. Worth measuring before committing to either.

Render configuration covers four more of the 28 quirks essentially for free: images blocked, forced colour scheme, device pixel ratio for the retina case, and font substitution to model Outlook falling back to Times New Roman.

Reuse the existing structural assertions rather than diffing pixels. Overflow, broken images and page errors are deterministic; screenshot diffs are flaky and would need the corpus work first.

Clients it matters for

Apple Mail (macOS + iOS), Gmail web, Outlook.com

Depends on

The Gmail and Outlook.com transform modes — this is the layer above them.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions