Cross-browser совместимость

«У меня в Chrome работает» — самый частый bug-report от разработчика. Половина пользователей на Safari (mobile особенно), Firefox держится у power-users, Edge у enterprise. Cross-browser pass — обязательная check pre-launch и quarterly.

Site: {{site_url}} Target support: {{browser_support_target}}

1. Browser matrix

Что тестировать:

2. Top 30 quirks by browser

Safari (desktop + iOS)

CSS:

• backdrop-filter нуждается в -webkit-backdrop-filter prefix
• 100vh на iOS включает chrome (top/bottom bars) → use 100dvh или 100svh
• gap на flex поздно landed (Safari 14.1+)
• overflow: clip не поддерживается до Safari 16
• :has() selector поздно landed (Safari 15.4+)
• Date inputs выглядят native (отличается от Chrome) — могут ломать verschen

JS API:

• Intl.Segmenter — Safari 14.1+
• ResizeObserver — Safari 13.1+ (ОК)
• structuredClone — Safari 15.4+
• Array.prototype.at — Safari 15.4+

iOS specifics:

• 300ms tap delay (фикс через touch-action: manipulation)
• Input zoom on focus если font-size < 16px
• Position: fixed unreliable когда keyboard up
• WebKit autoplay: video / audio только в response to user action
• navigator.share доступен только в HTTPS

Firefox

CSS:

• Scrollbar styling: scrollbar-width + scrollbar-color (нативно), не ::webkit-scrollbar (Chrome/Safari)
• text-decoration thickness rendering minimal differently
• Font rendering чуть толще чем Chrome (anti-aliasing difference)
• accent-color поздно landed (Firefox 92+)

JS:

• Generally ОК API support, near-parity с Chrome
• Different motion easing default по сравнению с Chrome

Chrome

CSS / JS:

• Generally cutting-edge поддержка — но дев-blind-spot: что работает в Chrome не работает elsewhere
• Chrome extensions модифицируют DOM (Grammarly, Adblock, password managers) — твой код не должен ломаться от этого
• prefers-reduced-motion иногда не уважается в специфических animation библиотеках

Mobile WebView (in-app browsers)

• Twitter / Facebook / LinkedIn / Slack — открывают links в их WebView, не нативном
• Cookies и localStorage могут не persist между sessions
• Address bar высота меняется при скролле → 100vh flickers
• Custom URL schemes (apps) могут не работать

3. Аудит: что тестировать

Visual / layout

• Compare same page Side-by-side в каждом browser (BrowserStack или Chrome DevTools device emulation для quick check, real device для real verification)
• Шрифты рендерятся consistent
• Spacing, alignment — ровно
• Скроллбар выглядит OK (или скрыт consistent)
• Modals / overlays на iOS не «срываются» по краям

Forms / inputs

• Date picker (Safari отличается от Chrome)
• File picker (mobile vs desktop)
• Autofocus
• Autocomplete behaviour
• Inputmode hints на mobile keyboard

Critical flows

• Прокликать signup / login / checkout в каждом browser
• Проверить async actions работают (fetch, WebSocket)
• Проверить cookies / localStorage

JS APIs

• Если используешь bleeding-edge (Intl.Segmenter, ResizeObserver, IntersectionObserver) — каждый browser проверь

Performance / perceived perf

• LCP / CLS / TBT на каждом
• Animations smooth (60fps)? Без jank?

4. Polyfills и feature detection

When to polyfill

• Если API недоступен в browserslist target
• Если есть graceful fallback (нет блокера) — лучше fallback чем polyfill
• Polyfill добавляет вес — measure cost

Feature detection

// ✓ правильно
if ('IntersectionObserver' in window) { ... } else { /* fallback */ }

// ✗ user-agent sniffing — фрагильно
if (navigator.userAgent.includes('Safari')) { ... }

Tools

• caniuse.com — feature support matrix
• MDN Browser Compatibility — detailed per feature
• browserslist — define target в package.json
• autoprefixer — CSS vendor prefixes auto-applied
• core-js — JS feature polyfills (Next.js включает по default)

5. Testing методики

Real devices vs emulator

• Chrome DevTools device emulation — для layout quick check, не для JS behavior
• BrowserStack / Sauce Labs — реальные browsers/devices, paid
• Lambdatest — альтернатива
• Real device on your desk — настоящий iPhone и Android device — invaluable

Free options

• open -a Safari на Mac — Safari desktop
• iPhone / Android (свой собственный) — mobile real
• Firefox + about:config для отладки
• Different user profiles для extension-free / extension-heavy testing

6. Anti-patterns

• ❌ «Chrome works, ship» — половина users не на Chrome
• ❌ User-agent sniffing для feature detection — фрагильно
• ❌ -webkit-only prefixes без unprefixed версии — fails в Firefox
• ❌ Тестировать только desktop — mobile browsers разнятся радикально (Safari iOS vs Chrome Android)
• ❌ Polyfill всё подряд — bundle растёт, perf падает; targeted polyfills
• ❌ Игнорить in-app browsers (WebView) — Twitter / Facebook / Slack их используют
• ❌ Полагаться на prefers-reduced-motion без media-query — браузеры разнятся
• ❌ Тестировать раз — в каждый sprint что-то новое падает в одном из browsers

7. Output

1. Browser matrix with status per critical flow per browser
2. Top-10 cross-browser bugs с repro steps + browser-specific fix
3. Polyfill audit — что грузим, что можно убрать
4. Browserslist update если target out of date
5. Re-test schedule — какие browsers на каждый release, какие quarterly