---
title: "App works in Chrome but not Safari — what do you check first?"  
description: "App works in Chrome but not Safari — what do you check first?"  
author: "Ravi Vishwakarma"  
published: 2026-01-06  
updated: 2026-01-12  
canonical: https://answers.mindstick.com/qa/116264/app-works-in-chrome-but-not-safari-what-do-you-check-first  
category: "twitter"  
tags: ["twitter"]  
reading_time: 3 minutes  

---

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

## Answers

### Answer by Anubhav Sharma

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 use

## 1. Open Safari DevTools (Most Important)

- **First thing, always.**
- Enable it:\ **Safari → Settings → Advanced → “Show Develop menu”**
- Open Console:\ **Develop → Show [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) Console**

### Look for:

- `SyntaxError`
- `TypeError: undefined is not an object`
- Promise 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`, `toReversed`
- Top-level `await`
- [Arrow functions](https://www.mindstick.com/forum/158331/what-are-arrow-functions-in-javascript-and-how-do-you-use-them) inside certain contexts

### Quick test:

```plaintext
console.log(SafariVersion);
```

If you’re not transpiling → **this is usually the [root cause](https://www.mindstick.com/forum/159402/segmentation-fault-error-in-c-c-plus-plus-program-what-steps-to-identify-the-root-cause)**.

**Fix**:

- Use **Babel / [TypeScript](https://www.mindstick.com/blog/305052/why-is-typescript-the-best-option-for-your-software-project-development) target ES5 or ES2017**
- Add polyfills (core-js)

## 3. `fetch`, CORS, and Network Issues

Safari is stricter than Chrome.

### Check Network tab:

- [Request blocked](https://www.mindstick.com/forum/159450/solve-cross-origin-request-blocked-in-react-frontend-to-an-express-js-api)?
- Preflight (`OPTIONS`) failing?
- Missing headers?

### Common Safari issues:

- Missing `Content-Type`
- Missing `credentials: 'include'`
- CORS headers not exactly correct

```plaintext
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: sticky`
- `flex` bugs
- `vh` height issues (especially iOS)
- `overflow: hidden` + flex
- `gap` in flex (older Safari)
- `-webkit-` prefixes missing

### Example fix:

```css
display: -webkit-flex;
-webkit-overflow-scrolling: touch;
```

## 5. Date & Time Parsing

Safari is **extremely strict**.

### This works in Chrome but fails in Safari:

```plaintext
new Date('2025-01-12 10:30:00')
```

### Safari-safe:

```plaintext
new Date('2025-01-12T10:30:00')
```

Or parse manually.

## 6. LocalStorage / SessionStorage

Safari (especially private mode) can **throw exceptions**.

```plaintext
try {
  localStorage.setItem('x', '1');
} catch (e) {
  // Safari private mode
}
```

Chrome usually ignores this.

## 7. Third-Party Libraries

Some libraries:

- Assume Chrome behavior
- Use unsupported APIs
- Ship 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 differ
- Click delay issues
- Autoplay [restrictions](https://www.mindstick.com/news/2343/a-handbook-for-social-media-parental-restrictions)
- `position: fixed` bugs

Test on **real device**, not just desktop Safari.

## 9. HTTPS / Mixed Content

Safari blocks more aggressively:

- HTTP images inside HTTPS
- HTTP [API calls](https://www.mindstick.com/forum/159783/how-can-you-handle-asynchronous-api-calls-in-an-asp-dot-net-mvc-application)
- Insecure cookies

## 10. Quick Isolation Test

To narrow it fast:

- Comment out recent JS changes
- Disable CSS file
- Replace API call with mock data

Safari breaks usually point **exactly** to the issue once isolated.

## TL;DR – What I Check First

- **Safari Console errors**
- **ES feature [compatibility](https://www.mindstick.com/blog/303291/best-practices-for-working-with-host-apis-security-compatibility-and-performance-considerations)**
- **Date parsing**
- **CSS flex / sticky issues**
- **CORS & fetch behavior**


---

Original Source: https://answers.mindstick.com/qa/116264/app-works-in-chrome-but-not-safari-what-do-you-check-first

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.