To understand why things break, you need to understand what's under the hood. Every browser has a rendering engine — the software that reads your HTML/CSS and paints pixels on screen. Different engines, different interpretations, different bugs.
| Engine | Browsers | JavaScript Engine | Market Share |
|---|---|---|---|
| Blink | Chrome, Edge, Opera, Brave | V8 | ~72% |
| Gecko | Firefox | SpiderMonkey | ~3% |
| WebKit | Safari, iOS browsers (all of them) | JavaScriptCore | ~18% |
Key Point: Chrome and Edge use the same engine (Blink) — so they behave almost identically. The real cross-browser bugs happen between Blink, Gecko, and WebKit. That's Chrome vs Firefox vs Safari.
Here's the thing most people miss: on iOS, every browser is Safari under the hood. Chrome on iPhone? It's WebKit. Firefox on iPhone? Also WebKit. Apple forces every browser on iOS to use the WebKit engine. So if your app breaks on Safari, it breaks on every iOS browser.
| What Breaks | Where | Why |
|---|---|---|
| Date input field | Safari (older versions) | Safari didn't support <input type="date"> — shows a plain text field instead |
| Flexbox gap property | Safari < 14.1 | Safari added gap support late — layouts break without it |
| Smooth scrolling | Safari | scroll-behavior: smooth doesn't work the same — scroll events fire differently |
| Shadow DOM | Firefox (older) | Shadow DOM v1 had partial support — custom component tests fail |
| CSS backdrop-filter | Firefox (older) | Blur effects behind elements not rendered — UI looks wrong |
| Form auto-fill | All browsers | Each browser fills forms differently — login tests can fail randomly |
When a test fails on one browser but passes on others, the first question is: is it a CSS rendering issue or a JavaScript behavior issue? Open the same page in that browser's DevTools and compare. 80% of the time it's CSS.
Q: What are the main browser rendering engines and how do they affect testing?
A: There are three main engines: Blink (Chrome, Edge, Opera), Gecko (Firefox), and WebKit (Safari). Since Chrome and Edge share Blink, they behave similarly. Cross-browser bugs typically happen between these three engine families. For example, CSS Flexbox gap doesn't work in older Safari, scroll events fire differently in Firefox, and auto-fill behaves uniquely in each browser. In our framework, we test critical flows on all three engine families — Chrome (Blink), Firefox (Gecko), and Safari (WebKit).
Don't assume "I tested on Chrome and Edge, so we're good." Both use Blink. You haven't actually tested cross-browser. You need at least one Blink + one Gecko + one WebKit browser for real coverage.
Key Point: Three engine families — Blink, Gecko, WebKit. Real cross-browser bugs happen between these families, not within them.