Cross-browser compatibility is addressed
Why it matters
Browser compatibility failures produce silent user exits: a feature that works in Chrome 130 may break in Safari 17 or Firefox ESR without any error visible to the developer. iOS Safari in particular has a distinct rendering engine (WebKit) that diverges from Chrome on CSS gap in flexbox, position: sticky, smooth scroll behavior, and new Web APIs — all common in modern framework templates. A project that passes QA in Chrome only can fail for a significant fraction of real users, particularly on mobile where Safari dominates iOS.
Severity rationale
Medium because browser-specific rendering failures silently break the experience for a significant user segment — particularly iOS Safari — without producing errors visible in development.
Remediation
Verify that a browserslist configuration is present and that PostCSS includes autoprefixer for CSS vendor prefix handling.
// package.json
{
"browserslist": ["last 2 versions", "> 1%", "not dead"]
}
Most Next.js, Vite, and Create React App setups include a default browserslist — confirm it hasn't been removed. Add autoprefixer to postcss.config.js if not already present. Test in at minimum Chrome (latest), Firefox (latest), Safari (latest, including iOS Safari), and Edge (latest). For any advanced CSS features — has(), container queries, subgrid — verify support at caniuse.com before shipping.
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Pre-Launch Checklist Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
External references
- iso-25010:2011 · compatibility.co-existence
Taxons
History
- 2026-04-18·v1.0.0·Initial import from pre-launch·automated