Safari zoom gesture's comeback in iOS 10

SeriesAccessible Web clock6 min read

With the release of iOS 10, Apple made a bold and hopefully trend-setting move that may save accessibility of mobile web.

You surely perfectly know one of the most obvious and useful gestures of your mobile phone - pinch-to-zoom. I believe the ability to quickly resize and scroll the content was one of key reasons for touch screens feeling so intuitive and for touch-enabled smartphones to have destroyed traditional mobiles a few years ago. Unfortunately, this very same gesture that used to work in Mobile Safari since its earliest days got quickly killed by web developers.

How it began

Traditional, pre-touch Internet was lacking any information about how a particular website should behave in a browser with dynamic, zoomable viewport. The viewport meta tag was born for the purpose of controlling this. Initially, it was used just to specify the initial width of a website (the device-width directive). And that was all good.

But then, we web developers have noticed that pinching & zooming viewports results in strange behavior of content with position: fixed. And neither us nor our designers did want to just give up on that property. So, we've looked into the viewport configuration docs and, much to our own ruin, found out that we can just disable the zoom entirely. Here's why we did it:

  • to allow elements with fixed positioning (instead of properly designing for a small screen)
  • to disable the zoom on double tap and/or to (improperly) use double tap for other reasons
  • to block the "zoom on input focus" behavior (instead of just using human readable font sizes)

Because the pinch gesture proved to be so problematic, it sort of became a "good practice" of mobile or responsive development to just disable zoom anyway in order to avoid problems.

If we are the culprits, here's the murder weapon used to kill mobile zoom on half of the Internet:

<meta name="viewport" 
      content="width=device-width, user-scalable=no">

The user-scalable directive (usually combined with minimum-scale & maximum-scale) proved to quickly hack and patch things up for us. But did we think about the consequences?

The day after

I can't even begin to describe the number of websites unreadable on my iPhone because of too small font coupled with an inability to zoom in. Or how often I can't enlarge a very small image just to be able to see it. The excellent Don't Disable Zoom article lists more cases like these and makes some strong points against disabling the zoom with the viewport meta tag. Here's the most ironic (but also brutally true) one:

Developer did a poor job of responsive design, and the user needs to zoom just to use the page

Thankfully, more and more web developers have started to become aware of the problem as the time passed and the irritation of mobile users grew. This may have brought Apple's attention too. Here are some manifestations of such awareness:

Unfortunately, the issue remained...

New beginning

Here's the quote of the day, taken straight from the iOS 10 changelog:

To improve the accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.

So guess what? In iOS 10, you'll be once again able to zoom on every website because Safari just doesn't care anymore about the part of viewport meta tag that blocks it. Seems like Apple finally grew tired of just politely asking web devs to start thinking about all their users.

Why Apple is not wrong

Obviously, Apple's decision made many developers angry for their websites and web apps becoming broken all of the sudden. Just look at the comments on this Twitter post. Believe me, as a web developer I can understand the pain of having apps broken "just like that". But as every serious programmer I've also been in a place where a particular part of a project, specification or system just has to be removed and/or reiterated upon, because it just doesn't work anymore. And that, however painful and troublesome it may be, is exactly the case of user-scalable=no.

Many developers argue that Apple is trying to kill web apps, but we should keep in mind that web apps are a specific piece of Internet and usually at some point native apps are the only way to stay in full control of how the app behaves anyway. And those native apps also have their means, based on the iOS/Android SDK and the user settings, of determining and applying appropriate font and UI sizes. In any case, accessibility doesn't come for free - we need to do our part too.

Also, if you feel betrayed by Apple dropping their support to the tag that basically became a web standard, remember that they are the ones who invented it in the first place. Therefore, it's their right and responsibility to control its fate. Not that this changes anything, because I'd be against supporting a flawed standard regardless of who invented it. 

Why not understanding this costs money

The funny fact about being ignorant to anything, including accessibility, is how it tends to bite you back in other, unexpected places later on. The habit of not caring about native mobile zoom has resulted in not caring about the same gesture in some actual business cases, like product galleries on e-commerce websites. It's astonishing that 40% of sites don’t support pinch or tap gestures for product images and therefore deny their clients an intuitive way to see in the whole glory products that those clients may want to spend their money on. 

And it's no accident. Being accessibility-aware is not just commendable but profitable as well. I sincerely hope that more and more business owners and developers will grow to understand that accessibility equals usability and usability equals (among others) money.

Notes on position: fixed

The history of position: fixed is full of various compatibility and UX issues. Perhaps it's just time to let it go in our designs? Or at least in mobile designs? iPhone and iPad users can easily scroll to the top of page simply by touching the top of the screen. Therefore, all those floating menus or "back to the top" buttons are pretty much redundant.

Also, do you know that position: fixed was deliberately not supported on mobile browsers until iOS 5 and Android 4? And it really should've stayed that way. I think Apple would never bring this CSS property to life on their mobile system if they would've anticipated they will also kill the zoom. In a way, they may be trying to amend their own mistakes by the iOS 10 change.

Finally, position: fixed property has also earned a "honorable" mention in my Introduction to web accessibility article for being an ever-present headache on the Web.

Is it over?

After a few years of having to avoid some websites on my iPhone and having to pray that Safari Reader will save my ass on others, here's how I'd like to celebrate the change:

Unfortunately, it may not be over yet. Once you give something to someone, it's really hard to take it back. Web developers may be very determined to have their zoom lock back in order to avoid having to go through troublesome design changes. I really hope we won't see any ugly JS hacks that somehow manage to bring this accessibility nightmare back...

But for now, it's only fair to say thank you Apple!