App works in Chrome but not Safari — what do you check first?

Question

When something works in Chrome but breaks in Safari, I check things in a very specific order. Safari is usually stricter and less forgiving, so failures often

Anubhav Kumar · Accepted Answer

When something works in Chrome but breaks in Safari, I check things in a very specific order. Safari is usually stricter and less forgiving, so failures often expose real issues.
Here’s the practical first-check checklist I useand 
1. Open Safari DevTools (Most Important)
First thing, always.Enable it:
Safari → Settings → Advanced → “Show Develop menu”Open Console:
Develop → Show JavaScript Console
Look for:
SyntaxErrorTypeError: undefined is not an objectPromise rejection errors
Safari often fails silently in UI but logs the real problem here.
2. ES / JavaScript Feature Compatibility
Safari is usually behind Chrome.
Common Chrome-only features that break Safari:
Optional chaining (obj?.prop)Nullish coalescing (??)Array.flat()Array.includes() (older Safari)Intl, toSorted, toReversedTop-level awaitArrow functions inside certain contexts
Quick test:
console.log(SafariVersion);
If you’re not transpiling → this is usually the root cause.
Fix:
Use Babel / TypeScript target ES5 or ES2017Add polyfills (core-js)
3. fetch, CORS, and Network Issues
Safari is stricter than Chrome.
Check Network tab:
Request blocked?Preflight (OPTIONS) failing?Missing headers?
Common Safari issues:
Missing Content-TypeMissing credentials: 'include'CORS headers not exactly correct
Access-Control-Allow-Origin
Access-Control-Allow-Credentials
Chrome may allow it — Safari won’t.
4. CSS Issues (Very Common)
Safari has many layout quirks.
First suspects:
position: stickyflex bugsvh height issues (especially iOS)overflow: hidden + flexgap in flex (older Safari)-webkit- prefixes missing
Example fix:
display: -webkit-flex;
-webkit-overflow-scrolling: touch;
5. Date and Time Parsing
Safari is extremely strict.
This works in Chrome but fails in Safari:
new Date('2025-01-12 10:30:00')
Safari-safe:
new Date('2025-01-12T10:30:00')
Or parse manually.
6. LocalStorage / SessionStorage
Safari (especially private mode) can throw exceptions.
try {
  localStorage.setItem('x', '1');
} catch (e) {
  // Safari private mode
}
Chrome usually ignores this.
7. Third-Party Libraries
Some libraries:
Assume Chrome behaviorUse unsupported APIsShip untranspiled builds
Check:
Are you importing esm instead of umd?Is the lib ES2022+?
8. iOS Safari ≠ macOS Safari
If the bug is on iPhone/iPad:
Touch events differClick delay issuesAutoplay restrictionsposition: fixed bugs
Test on real device, not just desktop Safari.
9. HTTPS / Mixed Content
Safari blocks more aggressively:
HTTP images inside HTTPSHTTP API callsInsecure cookies
10. Quick Isolation Test
To narrow it fast:
Comment out recent JS changesDisable CSS fileReplace API call with mock data
Safari breaks usually point exactly to the issue once isolated.
TL;DR – What I Check First
Safari Console errorsES feature compatibilityDate parsingCSS flex / sticky issuesCORS and fetch behavior
and

App works in Chrome but not Safari — what do you check first?

0

1 Answer

0

1. Open Safari DevTools (Most Important)

Look for:

2. ES / JavaScript Feature Compatibility

Common Chrome-only features that break Safari:

Quick test:

3. `fetch`, CORS, and Network Issues

Check Network tab:

Common Safari issues:

4. CSS Issues (Very Common)

First suspects:

Example fix:

5. Date & Time Parsing

This works in Chrome but fails in Safari:

Safari-safe:

6. LocalStorage / SessionStorage

7. Third-Party Libraries

Check:

8. iOS Safari ≠ macOS Safari

9. HTTPS / Mixed Content

10. Quick Isolation Test

TL;DR – What I Check First

Your Answer