It's Apple's Web. We're Just Playing in It

This post is over six (6) months old. Some things on this page my be out of date or no longer applicable.

Things Change rapidly. Many of the "dumb" ramblings I have no longer apply... but I'll leave this up still cause I don't wanna "post and run" haha.

I need to preface this with a few things. One, these are random rambling thoughts with really no cohesion or structure. Some of the stuff mentioned below is easily fixed but still annoying and therefore really really really trivial. Two I don’t use an iPhone nor do I use an OS X computer. So this of course will cause some issues. I even debated on whether this should be published since it honestly adds nothing to any conversation. It's random thoughts of a dev who got a little peeved one day. Lets begin haha!

Microsoft (actually Internet Explorer) received the anger of a thousand web devs for years because of their lack of, media query support, HTML5 form input types, to a lesser extent rem units, and a host of other things. To their credit they updated a lot of those quirks in IE 9, 10, 11 and now Edge. But we as web devs had no issue using those features. We employed modernizr, a Jquery plugin or a polyfill and moved on our way.

Apple on the other hand seems to look at things like “LOL nah we good!” or “You can go ahead and do it our way!”*.

* - This strictly isn't Apple either. Any company with any clout, money, power etc can attempt to pull this off. They just seem to be more successful at it.

Pointer Events :-(

Update! They have since added in css touch-action. The corresponding bug report can be found at webkits bugzill: Implement touch-action: manipulation; for iOS

Why do I think Apple says “do it our way”? In this instance we’ll take Pointer Events which was recommended for standard on 24 February 2015. If you do any searching of this you’ll come across several articles, posts, tweets about this. For instance:

Apple said no. Google then backtracked and said we won't support it unless Apple does. So Mozilla, Microsoft and Google were a go. Apple says “no”. Google then says no and we’re left with two and everyone loses. < insert xkcd standards cartoon here > … UGH.

As things do on the web they change and do so quickly. Google now has intent to implement PE with the Chrome Status Page on who else is going to implement it. You may notice a browser with the words "opposed" next to its name meaning not implementing.

Normally things end here. If you follow any of the latest tech news back in September Apple announced their new devices. We had the normal refresh of the iPhone and iPads along with two new things previously not seen on an Apple device. 3D touch and an Apple pen.

Many devices already had these with variations. Android has the long press, which from explanations I’ve read differs in speed and exactly what is performed from 3D touch… maybe not a good comparison haha, and stylus support. Microsoft has offered stylus support on Surface tabs for a while now and of course their touch events/gestures on Windows 8+.

This seems like a good time to implement Pointer Events. Apple introduced a Stylus, err “Apple Pen”, and new touch actions. Not to mention the Force Touch trackpad on OS X devices. You can probably already infer where this is going.

They created their own :-(.

Here is the full Apple Developer Docs on responding to Force Touch with Javascript . Pointer Events is nowhere to be found. A lot of the responses are ¯\_(ツ)_/¯. A lot because yes some people are very annoyed.

Safari iOS 9 Bugs

The Apple Event also gave us a chance to find what most would call a bug, Apple and the Webkit team call a “feature™”. If you set up your meta tags with “width=device-width” or “initial-scale=”1” you’ll be greeted with this media query bug on iOS9 devices .

According to Benjamin Poulain that's the intended behavior and “Desktop Sites were adding a responsive meta tag ” so they trotted out this “fix”.

In my personal opinion if a desktop site looks broken or zoomed in that’s the fault of the dev or project manager or whomever put that meta tag there. Not mine who did it right from the start. You can't even blame this on search engines tesing for mobile "friendly-ness". This becomes a search engine problem. Not a browser's problem. There were no changes made to rendering when we had keyword stuffing, hidden keywords placed all over pages like some weird magic eye book from the 1990's or other search engine ranking updates.

Examples of Webkit/Apple’s “fix” - o and you need to be on ios9 safari:

In order to fix Webkit’s/Apple’s “fix” you can do a few things. Ruin accessibility and usability and add “user-scalable=no” to the meta tag or add in yet another Apple specific meta tag/addition - "shrink-to-fit=no" .

Where shrink to fit comes from I haven’t a clue. I’ve searched .

What is the current response to this “fix”... ¯\_(ツ)_/¯ hope it gets changed. If Google, Microsoft or Mozilla did something like this all hell would break loose. There would be think pieces, scathing posts on how those companies are “breaking the web” or “not being good web citizens”.

300ms Delay

Update!!! This is no longer applicable. The Webkit Team has removed this as of 10/27/15: Implement viewport-width-based fast-click heuristic

While I’m on the subject of Meta Tags and viewports. If you’re a web developer dealing with responsive design you’re aware of the 300ms delay on mobile devices. You can remove it in all browsers sans Safari and still retain pinch to zoom.

Chrome / FireFox / Opera / Android Browser / Chrome Android / Firefox Android

<meta name="viewport" content="width=device-width">

Chrome / Internet Explorer / Edge / Opera / Chrome Android / Firefox Android

a[href] {
    touch-action: manipulation;
button {
    touch-action: manipulation;

Safari (Webkit) will not use the meta tag solution above because iOS uses a “double tap to scroll” which I wasn’t aware of until I read the related bug on Webkit’s Bugzilla and Benjamin Poulain (@awfulben on twitter - ironic ) doesn’t like some people.

CSS touch-action is being talked about but as of 6 October 2015. Related Bug on touch-action at Webkit Bugzilla. Having to use fastclick for one browser (with a giant market share in some markets) is annoying especially when a few fixes are readily available.

Touch Icons

Continuing the subject of meta tags we’ll add in touch-icons/favicons. This is also the trivial rant part. Currently you can supply a favicon with an ico and move on. All browsers **should** recognize it. You can also have touch icons for bookmarks or “pinning” the site to the desktop like so.

<link rel="icon" sizes="192x192" href="my-awesome-icon.png">

This also uses the sizes attribute for the link type of icon. Most browsers again will decide on which icon to use.

Microsoft also has a two line markup for their tiles for Windows

<meta name="msapplication-TileColor" content="#d00d00">
<meta name="msapplication-TileImage" content="my-awesome-icon.png">

It would be nice if Apple and Safari would take the rel=icon from above and the sizes and use it. That way we would only need to use it once for Android and iOS devices. That's not the case. To cover all your bases you’re going to need all these icons: Everything you always wanted to know about touch icons - Mathias Bynens

Another solution would be to use the Web Manifest specification. This would cover:

  • Titles / Names
  • Icons
  • Splash and Startup Images
  • Theme or status bar colors

This could remove all the "apple-" meta tags.

Left Over Ramblings

It’s not just Apple who’s at fault here. Some developers put out OS X only tutorials, documentation etc. Many of them use Macs. I can’t fault them there. That’s what they use. Some dev’s go as far as saying “meh its android/windows phone” when it comes to bugs. Well many people's first smartphone may be one of those because they are cheap.

If you don’t own an Apple computer good luck debugging Safari. Either through Safari itself or an emulator. If you don’t own an iphone nor an Apple computer go sign up for a service because that's the only way you’ll debug it. It's also not like iOS has a small browser market share either. Depending on where you get your stats from, and what country you choose ( or worldwide) to use Safari can have a ~50% market share. Microsoft offers free VM’s to test IE 6-11 and Edge on just about any OS.

Why else do I call this “Apple’s Web”? Ad blocking has been available on Android devices for ages. Adblock plus offers a browser for android devices and FireFox for Android can use extensions. But now that it's available on iOS and Safari there's a million articles on it. You’d be hard pressed to find any post or article published previously on the effects of ad blocking on mobile or the effects of ads on loading time.

Facebook released "Instant Articles". Again only available on i-devices. Within days articles were published how Facebook is now the big bad gatekeeper of the news. How this is bad for publishers, content creators and the web - and some of the same criticisms for Google's recently released project Amp.

Apple news, which bypasses it's own content filtering/ad blocking framework, recieved a "this is beautiful" etc. O and by the way:

Please move to the US and purchase an i-device to read this article until the date specified.

We can even talk about Service Worker and offline first websites/web apps. Again Apple and Safari are holding many of us back here because of their large market share. Take a read through of Lyza Danger Gardener's "How Do We Get It Done, Now? article. You can use Service Worker now! Firefox will even have full support here soon. Microsoft lists it as under consideration . You can actually go to a Microsoft site. See what they are considering and talk about it. Think about this. Yes Microsoft. In 2015. Apple... again ¯\_(ツ)_/¯ — Update!! They've since added in Webkit Status to list things under consideration, and in development similiar to the other browser vendors. Its pretty great! This also goes into the territory of indexdb which prompted Nolan Lawson to write Apple is the new IE and safari is the new ie 2 revenge of the linkbait.

We as developers need to realize something though. We are giving them a free pass. Like I said above. If Google, Microsoft or Mozilla did any of these things there would be an outrage. We need to do better.