ios7.md

iOS 7

http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

The Good

• New devices are exactly the same as iPhone 5 \o/

New features

• video subtitle tracks with localization
• PageVisibility
• <progress> element
• <iframe seamless>: no border or scrollbars
• XHR 2.0
• Airplay API:

video.addEventListener('webkitcurrentplaybacktargetiswirelesschanged', function() {
    // woot
});

• Speech synthesis API: text to speech with 36 different voices (different languages)
• requires explicit user action

speechSynthesis.speak(new SpeechSynthesisUtterance("Hello, this is my voice on a webpage"));

Other

• unprefixing
• MutationObserver
• window.doNotTrack

CSS

• position: sticky
• CSS regions (flow content through different containers)
• CSS Grid layout
• Dynamic fonts

h1 { font: -apple-system-headline1 }
p { font: -apple-system-body }

• some extra small CSS stuff

To Know

• <title> only shown in the tab switcher

• <input type="datetime"> removed (deprecated in the standard)

• you should use separate date and time inputs

• falls back to type="text", BE AWARE

• JS runtime available in the native side

• paginate mode

• inline video possible inside UIWebView

• remote debugger udpates (requires Safari 6.1)

The Bad

• no WebGL, fullscreen, WebRTC, getUserMedia, IndexedDB

• WebSQL problems

• conflicts with the new gestures (swipe from bottom)

• toolbars, scrolling

• oh my fucking god

• no more window.scrollTo(0, 1);

• no resize event when toolbar hides/show up

TOOLBARS WILL NEVER HIDE IF

• you use an iframe
• you use overflow: scroll
• you use a JS scroller (haha! you deserve it!)

http://www.mobilexweb.com/wp-content/uploads/2013/09/twitter.png

=> no way to force fullscreen (e.g. for games):

http://www.mobilexweb.com/wp-content/uploads/2013/09/catchme.png

Extra

• bottom toolbars (or any interactive elements) are bust if they are where the Safari toolbar appears in

Other

• swipe from bottom gesture might conflict with the native one
• sideways swipes might conflict with Safari's back/forward action

Homescreen webapps

• completely broken

• alert, confirm, prompt don't show up

• cannot open external URLs

• installing several homescreen webapps opens gates to Hell

• media queries honor the wrong orientation when an input is in focus

• weird stuff with AppCache (well duh)

• cookies not sent when requesting the icon

• statusbar weirdness

• multitasking screenshot is blank

Other

• no Nitro engine for Phonegap et al
• icon sizes
• new sizes
• 7 freaking icons needed to support all iOS devices and versions