Is Safari the new IE?

How Severe Are Safari's Compatibility Issues?

As the default browser for Apple devices, Safari holds a significant market share, but front-end developers frequently complain about its compatibility issues. From CSS feature support to JavaScript API implementations, Safari often lags behind Chrome and Firefox. For example, it wasn't until iOS 15.4 that Safari supported the CSS :has() selector, while other major browsers had already implemented it long before. This delay forces developers to write extensive compatibility code:

/* Other browsers */
.container:has(.active) {
  background: #f00;
}

/* Safari fallback */
.container.active-parent {
  background: #f00;
}

Which Web APIs Behave Abnormally in Safari?

Safari's support for modern Web APIs is particularly problematic. Its IndexedDB implementation has memory leaks, WebRTC features are incomplete, and even basic Web Components support arrived late. Here’s a typical example of IndexedDB potentially crashing in Safari:

let db;
const request = indexedDB.open('testDB', 1);

request.onupgradeneeded = (event) => {
  // Safari versions below 13 may throw exceptions here
  const db = event.target.result;
  db.createObjectStore('data', { keyPath: 'id' });
};

request.onsuccess = () => {
  db = request.result;
  // Safari may exhibit memory leaks here
};

What Unique Behaviors Does Safari's Rendering Engine Have?

The WebKit engine has its own logic for certain CSS properties and layout calculations. Flexbox and Grid layouts often behave inconsistently in Safari compared to other browsers. For instance, support for the gap property in Flex layouts arrived over a year later in Safari. Even more frustrating is Safari's implementation of position: sticky:

<style>
  .sticky {
    position: sticky;
    top: 0;
    /* Safari requires this prefix */
    position: -webkit-sticky;
  }
</style>

Why Are Safari's Debugging Tools Considered Inadequate?

Compared to Chrome DevTools, Safari's Web Inspector is limited in functionality. Remote debugging iOS devices requires macOS, and the tools are often slow to respond. Support for debugging Service Workers and the Cache API is also lacking. For example, visualizing CSS grid layouts lacks overlay tools:

// Debugging Service Workers in Safari is challenging
navigator.serviceWorker.register('/sw.js')
  .then(registration => {
    // Console logs often go missing in Safari
    console.log('Registration successful');
  });

What Problems Does Safari's Update Mechanism Create?

Unlike Chrome's automatic updates, Safari updates are typically tied to macOS/iOS system updates. This means users may remain on outdated browser versions for extended periods. Statistics show that over 15% of iOS users still use Safari versions from two years ago. This fragmentation poses significant challenges for developers:

// Need to detect Safari versions to decide whether to use new features
const isOldSafari = /Version\/[\d.]+.*Safari/.test(navigator.userAgent) && 
                    !navigator.userAgent.includes('Chrome');

if (isOldSafari) {
  // Load polyfill
  import('safari-polyfill');
}

How Does Apple's Closed Ecosystem Impact Web Development?

Apple's restrictive policies toward PWAs are particularly evident. It wasn't until 2022 that iOS offered limited PWA functionality. Critical features like push notifications and full-screen experiences remain missing. Many properties in the Web App Manifest are ignored by Safari:

// manifest.json
{
  "display": "standalone",  // Often ignored in Safari
  "start_url": "/?standalone",
  "orientation": "portrait" // Safari frequently ignores this setting
}

How Should Developers Handle Safari's Quirks?

Despite the complaints, supporting Safari is a necessity. Progressive enhancement and feature detection are key strategies. Tools like Modernizr or direct feature detection can help:

// Detect specific feature support
if (!CSS.supports('display: grid')) {
  // Load fallback styles
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'fallback.css';
  document.head.appendChild(link);
}

Is the Community's Attitude Toward Safari Changing?

More developers are publicly criticizing Apple's approach to web standards. While the WebKit team has improved its responsiveness, fundamental issues remain unresolved. Some projects are beginning to consider dropping support for older Safari versions:

// browserslist configuration in package.json
{
  "browserslist": [
    "> 1%",
    "not safari < 14",
    "not ios_saf < 14"
  ]
}

What Improvements Might Safari Make in the Future?

Recently, the WebKit team has accelerated its implementation of new standards. Modern features like CSS Container Queries and CSS Nesting are already or soon to be available in Safari. However, for developers to change their perception, Apple needs a more open update policy and better standards support:

/* Upcoming CSS nesting support */
.parent {
  color: red;

  & .child {
    color: blue;
  }
}