iOS 7 beta and the new Safari for web developers

Apple has released iOS 7 beta, the next generation of the operating system for iPhone and iPad. It includes the first big update to Safari on iOS since 2007 so it comes with some changes that will affect websites and HTML5 webapps. And, as always, every web developer should be aware of what’s new on this platform.

As every version, I’ve tested it and I want to share the important updates for web developers and HTML5 compatibility. And, as with every version, the documentation for web developers doesn’t exist.

DISCLAIMER:This post is based on beta 2; it’s available only for developers participating in the iOS Developer Program. This year we can discuss new stuff even if you are not under NDA; however the discussion must be held in the Apple Developer Forum. Don’t blame me, it’s not my call :)This post is available in two parts: all the public information is here, and the rest of the topic inside the Discussion Forum – a link at the end of this post. If you don’t have an account yet you can get one for free.

This post will talk about

The new Safari

Changes in the Operating System

HTML5 markup support

HTML5 JavaScript APIs

CSS support

Changes that might affect your app

Improvements for native web development

Not there yet

Bugs found

The new Safari

Safari is now in fullscreen mode by default

Safari on iOS has received a big update, at least from a UI perspective. Starting with the new feature where Web browsing is now always in full screen (at least in iPhone). When the user scrolls for the first time, the toolbar will disappear and the URL bar is transformed to a small title bar at the top. It seems it shows only the current domain and not the Page title according to the video available. Can we trigger the fullscreen with the old trick window.scrollTo(0, 0)? In the second part of this post you will see my findings on that.

The whole UI has changed, including new icons replacing the Share icon with a new style, so every website that is inviting the user to add it to bookmarks or to the Home Screen need to update the icon.

iOS 7 has changed the Share icon and it has a new Add to Home Screen button.

Browsing

There is a new tab browsing mechanism with a nice 3D effect to see all of them without the previous restriction of 8 windows. Are background tabs still executing when Safari is in the foreground?

We have now Favorites while typing URLs or making searches in the top bar. Can we define Icon/text for favorites different than from Home Screen icons? Text here is 2 lines for example compared to Home Screen icons

Safari now includes favorites with icons and a new tab browsing UI

New gestures

Swiping up from the bottom the new Control Center will appear.

The operating system and Safari itself now offer new gestures that might impact your website, mostly if you are detecting gestures yourself. The first gesture is for the Control Center that appear when you swipe up from the bottom of the screen. In this version, because of the full screen, the bottom of the screen might be part of your website.

The second and probably more problematic gesture is swipe right and left from the border; Safari will trigger the back and forward action in the browsing history à la IE10 on Windows 8. This gesture might have some conflicts with your website if you are inviting users to swipe left or right without some nice margins around (but to be honest, you have the same problem right now with Chrome too).

Several questions appear here, such as: can we prevent these gestures? If the user goes back accidentally and then goes forward again, is it a reload? Do we have the same behavior on home screen webapps? What about UIWebViews?

Changes in the Operating System

New icon size

Based on official screenshots of iOS 7, the new OS icons are 5% bigger; being 120×120 on Retina devices instead of the previous 114×114. Icons are also flat now and they don’t have the shiny effect anymore, so we might want to update our icons to match the new design. Questions here are: what will happen on iPad (being 144 x 144 on iOS 6)? Is Safari using new sizes for the apple-touch-icon link tag? Because there is no shiny effect, is apple-touch-icon-precomposed obsolete now?

Multitasking and UI

There is a new multitasking ability in iOS 7, with a new UI and new features. Apps can now work in a full-screen mode a la Windows Phone; that means the status bar is transparent over our app background, creating an immersive experience. Can we take advantage of these changes when creating home screen webapps? In terms of new iconography and UI styles, such as replacing the classic back button, I’m sure most UI frameworks out there will update their CSS to match the new style. While I don’t agree too much with the idea of imitating native UI, I’m sure most designers will look for showing native-like controls on their websites and webapps.

The usual questions

We have a lot of questions that we repeat on every version, such as: WebGL, IndexedDB, WebRTC or getUserMedia, WebP, any new HTML5 API, is there any way to add something to the Notification Center from a website, what happens with background execution or if Apple has updated Safari docs.

This post continues…. now

What you have here is just 10% of this post; to continue reading this post while iOS 7 is in beta: