DEV Community

Cover image for Stop Buying Macs Just to Fix CSS
Fabrizio La Rosa
Fabrizio La Rosa

Posted on

Stop Buying Macs Just to Fix CSS

#webdev #programming #safari #css

The "Hacker" Way to Debug Safari on Windows & Linux

Let’s be honest: Safari is the new Internet Explorer.

As web developers, we live in a world dominated by Chromium (Chrome, Edge, Brave) and Gecko (Firefox). We build beautiful, responsive layouts, everything looks crisp on Windows or Linux… and then the ticket arrives:

"The menu is broken on my iPhone."
"The images are squashed on my MacBook."

If you don’t own a Mac, your options usually range from expensive to painful:

  1. Buy a Mac – Spend $1,000+ just to verify a flex-gap issue.
  2. Cloud testing (BrowserStack, LambdaTest) – Excellent tools, but costly and sometimes laggy.
  3. VMs / Hackintosh – Legal gray area, fragile setup, endless headaches.

But there is a fourth way.

A hidden gem in the open‑source world that lets you run WebKit (the engine behind Safari) natively on Windows and Linux.

It’s free. It’s fast. It works with Node.js.

Welcome to Playwright WebKit.

What Is WebKit (and Why This Works)

Safari is not magic. It’s a browser UI built on top of a rendering engine called WebKit.

  • Chrome / Edge / Brave → Blink
  • Firefox → Gecko
  • Safari → WebKit

Apple develops WebKit, but WebKit itself is open source.

Even though Apple discontinued Safari for Windows back in 2012, the WebKit engine is actively maintained and compiled for Windows and Linux by the Playwright team (Microsoft).

This means:

  • Same CSS rendering rules
  • Same JavaScript quirks
  • Same layout bugs

It’s not “Safari.app”, but for layout, CSS and JS debugging it’s 99.9% accurate.

If it breaks here, it breaks on iPhone. Period.

Setup: From Zero to Safari in 2 Minutes

All you need is Node.js.

Prerequisites

  • Node.js (Windows, Linux or WSL)
  • A terminal (PowerShell, CMD, Bash)

Step 1: Install Playwright Browsers (Important)

Before doing anything else, run:

npx playwright install
Enter fullscreen mode Exit fullscreen mode

This command downloads Chromium, Firefox and WebKit binaries for your OS.

You only need to do this once.

💡 If you skip this step, codegen may fail or download browsers every time.

Step 2: Launch WebKit Instantly

Now run the magic command:

npx playwright codegen https://your-website.com --browser webkit
Enter fullscreen mode Exit fullscreen mode

✅ Works with localhost too:

npx playwright codegen http://localhost:3000 --browser webkit
Enter fullscreen mode Exit fullscreen mode

Playwright will:

  1. Launch WebKit
  2. Open a browser window
  3. Attach DevTools automatically

And just like that — you are debugging Safari on Windows/Linux.

What You’re Looking At

The window is minimal:

  • No address bar
  • No bookmarks
  • No Apple UI

But don’t be fooled.

👉 This is real WebKit rendering your site.

It’s the same engine used by:

  • Safari on macOS
  • Safari on iOS
  • In‑app browsers on Apple devices

Debug Like a Safari Veteran

Open DevTools

Right‑click anywhere → Inspect Element.

The DevTools are WebKit Inspector, not Chrome DevTools.

Expect differences — and that’s a good thing.

What to Check First

  • Elements – CSS differences, flexbox behavior, missing gaps
  • Console – Safari‑only JS errors (optional chaining & date parsing, anyone?)
  • Network – CORS, headers, mixed‑content issues

Common Safari Bugs to Hunt

  • gap in flexbox behaving oddly
  • 100vh and dynamic viewport height on mobile
  • Images stretched inside flex/grid containers
  • position: sticky inconsistencies
  • Date parsing: 
new Date('2023-05-01 12:00:00') // ❌ may fail in WebKit
new Date('2023-05-01T12:00:00Z') // ✅ safe
Enter fullscreen mode Exit fullscreen mode

Method 2: Scripted Safari (Power User Mode)

If you debug Safari often, create a reusable script.

debug-safari.js 

const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch({ headless: false });

  const context = await browser.newContext({
    viewport: { width: 390, height: 844 }, // iPhone 12–14
    deviceScaleFactor: 3,
    userAgent:
      'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) ' +
      'AppleWebKit/605.1.15 (KHTML, like Gecko) ' +
      'Version/15.0 Mobile/15E148 Safari/604.1'
  });

  const page = await context.newPage();
  await page.goto('http://localhost:3000');
})();
Enter fullscreen mode Exit fullscreen mode

Run it with:

node debug-safari.js
Enter fullscreen mode Exit fullscreen mode

🎯 Result: a persistent iPhone‑like Safari simulator on Windows.

Limitations (Know the Trade‑Offs)

This is a hacker solution — powerful, but not magical.

What You Can’t Test

  1. Video & audio codecs
    No H.264 / AAC (licensing restrictions).

  2. Apple system fonts
    San Francisco isn’t included unless manually installed.

  3. Apple‑only integrations
    Apple Pay, iCloud, Keychain, OS‑level APIs.

For CSS, layout and JS bugs, none of this matters.

When Should You Still Use a Real Mac?

  • Final QA before launch
  • Media playback debugging
  • Native Safari extensions

For daily development? Playwright WebKit is more than enough.

Final Thoughts

Stop shipping code and hoping Safari behaves.

With Playwright WebKit, you get:

  • Free Safari‑grade rendering
  • Instant debugging
  • No Mac required
  • No subscriptions

All inside your terminal.

Once you try this, you’ll never justify buying a Mac just for CSS bugs again.

Happy debugging. 🚀

Top comments (0)