Safari is Not the New IE, But…

safari_not_ie_header

Developers love to hate on browsers. In recent memory that browser has always been Internet Explorer due to Microsoft’s decision to slow down browser development after IE6. The ensuing developer backlash spawned countless comics, clever desktop backgrounds, and witty conference slides.

But, as Microsoft has substantially ramped up their work on the web platform and Edge, it now feels unfair to make them the butt of the joke. And increasingly, with the popularity of articles like Nolan Lawson’s “Safari is the new IE”, developers’ new target is becoming Safari. As someone who speaks to a lot of web developers myself (working as a developer advocate for Telerik), I hear this sentiment often. But as a data-minded person, I wanted to see if I could quantify the reasoning behind the animosity.

In this article I’m going to use data from caniuse.com to try to quantitatively determine developers’ most-hated browser. But first I have to discuss what I’ll be measuring, and to do that I have to go back in time a bit.

What makes developers hate a browser?

Internet Explorer has long held the title of most-hated browser, but it hasn’t always been that way. Back in the late 1990s and early 2000s, as Microsoft increased the engineering effort on Internet Explorer, Netscape Navigator’s lagging feature set made it the primary target for developer hatred. It’s hard to find links that still work that illustrate this, but I’ve managed to find a couple gems:

History tells us that web developers have a deep-seated need to rant and make snarky jokes about their most hated browser of the day. The anti-Netscape arguments are surprisingly similar to the anti-IE arguments of the last few years, and the anti-Safari arguments of today.

Although I’m oversimplifying a bit, I would argue that web developers primarily hate two things: not being able to accomplish things they can do in other browsers, and a lack of communication as to why those things have not been implemented. I’ll start with the former (lack of features) and move on to the latter (lack of communication) later. To put this in context, let’s start with an example.

Anyone who has done web development for more than a few years has probably written code like this:

if (document.attachEvent) {
    element.attachEvent(...);
} else {
    element.addEventListener(...);
}

For those of you that don’t know, IE did not support addEventListener() before IE9. So if you wanted to attach an event listener to a DOM node – probably the most common use case for JavaScript on the web — you had to fork your code and use IE’s non-standard attachEvent() method. Although the workaround was trivial (and often abstracted away by a library), the need to write three extra lines of code for such a simple use case might have done more to incite IE hatred than some of the major features IE lacked for years.

This scenario, one browser lacking a feature, or what I’ll call a “feature outlier”, is one of the major things I believe drives browser animosity, because nearly every developer has a pet feature they’d be able to use if only browser X supported it. For older versions of IE the list of missing features was long, and, if you go back far enough, included major outliers like PNG transparency and a standards-compliant box model.

The IE box model bug was so well known that — I kid you not — it even has its own Wikipedia page.

I personally know of a few feature outliers in today’s Safari. For instance I’ve been talking about how Safari is the only browser without built-in form validation for years now. Nolan Lawson’s “Safari is the New IE” talks extensively about IndexedDB (which Safari has, but it’s unusually buggy in Lawson’s opinion). But, to get a full list of Safari’s feature outliers I had to turn to caniuse.

Measuring feature outliers

One of the great things about caniuse is they graciously make the raw JSON data that drives the site available on GitHub. This data made it relatively easy for me to derive how many features only one browser lacks.

What I did was grab the JSON file, and loop over each feature to determine how many features were only in three of the big four browsers. I limited the test to the big four — Chrome, Edge, Firefox, and Safari — as every other browser (with the exception of Opera Mini) is based on one of the same four rendering engines the desktop browsers use. I also chose to use the latest version caniuse has stats on, which means the data includes development versions of Chrome and Firefox, and Safari 9 rather than 8. You can view my full algorithm here.

Without further ado, here are the results of my feature outlier test:

Browser # of outliers Missing features (no support) Missing features (partial support)
Chrome 1 CSS Hyphenation None
Edge 23 SVG SMIL animation, Server-sent events, Web Notifications, CSS resize property, SPDY protocol, CSS Filter Effects, HTML templates, Canvas blend modes, srcdoc attribute for iframes, Improved kerning pairs & ligatures, Crisp edges/pixelated images, Referrer Policy, CSS3 font-kerning, Form attribute, meter element Drag and Drop, Data URIs, TTF/OTF – TrueType and OpenType font support, matches() DOM method, Number input type, Viewport units: vw, vh, vmin, vmax, Srcset attribute, CSS Appearance
Firefox 5 Media Source Extensions, CSS zoom, Channel messaging WebGL – 3D Canvas graphics, AAC audio file format
Safari 9 Internationalization API, CSS font-feature-settings, User Timing API, Resource Timing, Gamepad API Form validation, CSS3 word-break, Media Queries: resolution feature, Pattern attribute for input fields

Obviously this isn’t the most scientific of tests, but I still find the data interesting when viewed as a rough indication of the features browsers have yet to implement. Edge came out with far more outliers than I was personally expecting, with Safari a distant but significant second.

Why the Safari hating?

So if Edge has more feature outliers, why is Safari receiving so much more hatred lately? I’ll offer two reasons.

The first is communication. Although Edge is missing more features, most of the missing features have a documented status on https://dev.modern.ie/platform/status/. Additionally, Microsoft has a portal where you can submit and vote on features, and Microsoft has been good about publicizing their stance on larger features, such as their recent articles on web components.

The WebKit project (the rendering engine that drives Safari) has a status page that’s similar to Microsoft’s, however it feels lacking in its completeness. For example prominent web features such as pointer events and service workers are not listed. Frequently, the only place to find where the Safari team stands on an issue is on the W3C/WHATWG mailing lists or the WebKit bug tracker, neither of which are especially accessible to the average developer.

The second reason I’ll offer for the recent Safari animosity is in trends. Whereas just a few years ago Safari was one of the leaders in terms of browser features, it now seems to be quickly losing pace to Edge. To show this I took the data from caniuse and went back a few years. Using the browser version history from Wikipedia, I calculated how many feature outliers each of the major browsers has had over the last five years (again, you can see the algorithm I used and the full dataset here), and put the results in a Kendo UI line chart:

The number of outlier features over the last five years

A quick glance at this chart shows a concerning upward trend for Safari. And since this chart includes data from the not-yet-released Safari 9, and the next Safari release won’t come in the next year, there’s little reason to believe this chart will improve in the near future.

In defense of Safari

All of this is a bit unfortunate, because in my opinion Safari is a really good browser. In my experience, Safari is easily the best browser on OS X in terms of battery and memory usage. (External articles can confirm the battery usage, and I’ll use this comic to justify my memory claims.)

On mobile I’ll take iOS Safari over any Android-based browser, as I find iOS Safari to be far more performant for my daily web browsing. Safari’s feature set also isn’t really that bad – it’s on par with Edge on HTML5 Test, and among the leaders in terms of ES6 compatibility.

I titled this article “Safari is Not the New IE” because the thought that Safari is comparable to IE from the IE 7–8 days is ludicrous, except in one way: if Edge’s current rate of implementing features continues, Safari risks dropping into last place on the browser totem pole. And as history has taught us, whether it’s fair or not (usually not), the last-place browser opens itself up to the snarky jokes and memes that the development community loves to create.

safari-background

Comments

  • http://www.sandglaz.com/ Zaid Zawaideh

    Sure, they tick off more of the feature list, but it is buggy! Often there is no way of getting around the bug other than doing browser detection and turning off that feature for Safari!

    Two examples come to my mind: Indexeddb and suddenly changing the behaviour of taps on homescreen apps but NOT in Safari.

    It is one thing not having support for a feature, and it is another shipping a broken implementation. Also, there is ZERO communication on if/when a bug will be fixed.

    • Chris Portscheller

      Indexeddb, poor implementation of position:fixed, and onscroll events being ignored are my biggest complaints with Safari. Also, the fact Apple doesn’t allow third party browsers. There is a chrome browser, but it is in fact just a chrome skin with some extra functionality wrapped around the safari webview.

      • Frank

        “Also, the fact Apple doesn’t allow third party browsers.”

        You’re talking about iOS, then. The rest of the article is talking about OS X. Safari on these platforms is very similar, but not the same, just like “Chrome” on the desktop and “Chrome” on Android are different beasts. Let’s stay on topic.

  • Chris Portscheller

    “On mobile I’ll take iOS Safari over any Android-based browser” .. That’s a bold statement as Chrome on Android seems to run laps around Safari. Take a look at https://html5test.com/ and compare the two.

    • Frank

      I went to that page, and selected the most popular current version of iOS (8.0) and the most popular current version of Android (4.4). According to them, the scores are iOS 8 = 405, Android 4.4 = 379.

      That’s actually rather generous towards Android. While iOS 8 is over 80% of iOS users, Android 4.4 is not even 40% of Android users. The second most popular version of Android is 4.2, which scores a measly 228.

      Chrome on Android only beats Safari on iOS if you have the tiny sliver of users who have all upgraded their operating system and browser. Call me crazy, but I want the median user to be able to use the webpage I’m building, and at that, iOS Safari is far ahead of everybody else in the mobile space.

      • AlfonsoML

        You’re comparing “Android”, but you should have checked Chrome for Android (remember, in Android anyone can provide a rendering engine like Mozilla does), and then you’ll see that the score is 518, not 379 and you can install Chrome in any Android 4.1 and up. Even Firefox Mobile scores higher than Safari.

  • Duke

    i don’t dislike Safari on desktop, but Safari on mobile is TERRIBLE in terms of standard compliance and expected behaviours, it deserves some serious developer jokes

  • Dominic Watson

    Why is nobody talking about how buggy it is? I’d go as far as to say that transforms basically don’t work in Safari. Have to totally disable them as they’re glitchy as hell. Text flashing… elements disappearing. It just does not support transforms.

  • AlfonsoML

    For me the main reason why I don’t even try to test or care for Safari is just that I would need to buy a Mac to use it, and that’s a real expensive way to test things.
    Firefox and Chrome are cross-platform.
    IE and now MS Edge provides virtual machines to test any version that you would like.

    With Apple the only option is to buy one of their shiny toys.

  • johngf

    The source of “Reasons why Netscape sucks” may be old-skool, with font tags everywhere, but it is at least very tidy, nicely laid out and tiny. Maybe nostalgia ain’t so bad after all.

  • http://generatedcontent.org/ David Storey

    While the number of Microsoft Edge outliers shown in the table is relatively high, it doesn’t really show a correct picture:

    * CanIUse… doesn’t include JavaScript (except a few features). Edge is leading at ES6 support. The picture would be much kinder on Edge with this included
    * SPDY is included. SPDY was supported by IE, but deprecated in Edge in favour of HTTP/2. The latter is a standard and is the one that should be used, not SPDY.
    * SMIL is not something we will implement as it is agreed that this is on the way out. It is best for the Web to have a common animations model, and SMIL is incompatible with CSS animations/transforms. Web Animations is the way forward here
    * Filters is supported but behind a flag. This is the more responsible way of doing things than putting behind a vendor prefix that sites come to rely on and cause interop issues for other browsers.
    * Data URIs are supported. CanIUse gives partial due to an edge case of very large Uris (larger than you should responsibly use)
    * TTF/OTF are to standard. CanIUse gives partial due to the installable flag. We conform to the spec.
    * number input is given partial due to not showing number spinners. UI is not part of the spec (little spinner buttons don’t really make sense on touch where they’re too small to touch)
    * With viewport units it is only the vmax value not supported
    * CSS appearance until very recently (and the versions implemented) was non-standard. Firefox and Webkit support different values. Edge supports the most used one that is shared between Firefox and Webkit browsers: appearance: none (we support with -webkit- prefix, as that is how it is used on the Web)

    Of those left, a bunch are under active development in Edge.

    There are also additional things missing like getUserMedia/MediaCapture which is not in Safari 9. So while I support the conclusion that Safari is not the new IE, the delta between Edge and other browsers is not as big as shown here.