(note: this is based on the first iOS5 beta [9A5220p] and is subject to change on final release)
It looks like there’s finally some major improvements in mobile Safari, some of which I’ve found below on my “first glance” after downloading the SDK. Chime in if you find anything yourself!
Bad news first
Much to my disappointment, browser-based file uploads are still not supported (input type=”file”), even though they have been supported on Android since version 2.2 (which they have continued to improve and refine). The best use case for this is uploading pictures and videos straight from the browser, but Apple seems more interested in making those functions possible directly from the operating system itself, supporting only big names like Twitter and YouTube. So much for the little guys.
There’s other stuff on my wishlist that hasn’t yet been implemented, such as WebGL and indexedDB, along with some HTML5 input types, but regardless it’s good to see some real progress in iOS 5. (update: it appears that some WebGL features are starting to be supported, although the demos I tried didn’t seem to work).
Now let’s move on to the awesome new stuff that IS implemented!
position:fixed
A point of contention since the original iPhone was released in 2007, position:fixed now works on iOS5! What this means to developers: it’s now very easy to create top and bottom toolbars for your web apps. (there’s a long history of hacks and workarounds which will still need to be implemented as a fallback for the time being, but I’ll save that for another post. I should also mention that position:fixed has worked on Android since version 2.2, and webOS seems to support a somewhat hacky implementation).
Here’s a video demo of position:fixed on iOS5:
(check out the demo for yourself)
overflow:scroll
This is a similar problem to position:fixed, but now it works on iOS5! For content that doesn’t fit in its container element, previously the content was completely cut off (similarly with iframes). On the desktop we have the option to show scrollbars instead, allowing the user to scroll to see the content, but iOS made this difficult by requiring two fingers to scroll. Now overflow:scroll works and the user can scroll through the container’s content with a single finger. Developers can use new CSS to enable native scrolling (with scrollbars and momentum): -webkit-overflow-scrolling: touch; (via Johan Brook).
It’s assumed that it’s up to the developer to implement some sort of visual indicator to let the user know they can interact with the element.
One criticism so far: there’s no inertia scroll on this element, so it doesn’t quite feel the same as scrolling the page.
Here’s a quick video demo of overflow:scroll on iOS 5.
(check out the demo for yourself)
New Input Types
HTML5 defined many new helpful input types, and mobile operating systems have been slowly implementing them and creating optimized keyboards for the inputs. iOS5 now supports these input types: date, datetime, month, time, range. Click on the images to see their respective demo pages:
And a fun one – my iPhone slider hack based on input type range, which now actually works on the iPhone itself (because input type=”range” is now supported)!
Web Workers (JavaScript)
JavaScript is single-threaded, and it happens to run on the same thread as the UI, which means computationally expensive operations can lead to an unresponsive UI, and no one likes that. Web Workers help by offloading tasks to another thread and only returning output when it needs to. In other words, it’s a good thing for us web developers.
According to my own tests, Web Workers seemed to be briefly enabled on early versions of iOS3, but were soon disabled thereafter. Now with iOS5, they’re back again!
New ECMAScript 5 stuff (JavaScript)
(based on kangax’s ECMAScript 5 compatibility table)
| Feature | iOS 4.3.2 | iOS 5 beta 1 |
| Object.create | Yes | Yes |
| Object.defineProperty | Yes | Yes |
| Object.defineProperties | Yes | Yes |
| Object.getPrototypeOf | Yes | Yes |
| Object.keys | Yes | Yes |
| Object.seal | No | Yes |
| Object.freeze | No | Yes |
| Object.preventExtensions | No | Yes |
| Object.isSealed | No | Yes |
| Object.isFrozen | No | Yes |
| Object.isExtensible | No | Yes |
| Object.getOwnPropertyDescriptor | Yes | Yes |
| Object.getOwnPropertyNames | Yes | Yes |
| Date.prototype.toISOString | Yes | Yes |
| Date.prototype.toISOString | Yes | Yes |
| Date.prototype.toISOString | Yes | Yes |
| Date.now | Yes | Yes |
| JSON | Yes | Yes |
| Function.prototype.bind | No | No |
| String.prototype.trim | Yes | Yes |
| Array.prototype.indexOf | Yes | Yes |
| Array.prototype.lastIndexOf | Yes | Yes |
| Array.prototype.every | Yes | Yes |
| Array.prototype.some | Yes | Yes |
| Array.prototype.forEach | Yes | Yes |
| Array.prototype.map | Yes | Yes |
| Array.prototype.filter | Yes | Yes |
| Array.prototype.reduce | Yes | Yes |
| Array.prototype.reduceRight | Yes | Yes |
| Getter in property initializer | Yes | Yes |
| Setter in property initializer | Yes | Yes |
| Property access on strings | Yes | Yes |
| Reserved words as property names | No | Yes |
| Strict mode | No | Yes |
HTML5Test score
iOS 4.3.2 scores 206 (7 bonus points) on the HTML5 Test, whereas iOS 5 beta scores 267 (9 bonus points). Much of these gains seem to be made in the “Forms” and “Parsing rules” sections, as well as the “Web Workers” section.
Miscellaneous new stuff
- Inline SVG in text/html
- float32array, int8array, int16array, int32array in JavaScript
- window.matchmedia() (JavaScript)
onsearch Event (JavaScript)– it looks like this was just broken in later iOS 4.3 builds, but it’s back now in iOS 5- MathML elements recognized (based on html5test)
- Improved speed of Canvas rendering (source)
- UIWebView and home screen web apps now running on Nitro? (expected but not tested)
- Newly supported CSS gradient syntax (-webkit-linear-gradient versus the older -webkit-gradient syntax)
- classList (JavaScript)
- A major WebKit HTML5 History (popstate) bug is now fixed
- contentEditable now works properly
Any word on whether all the bugs with and are fixed?
http://blog.millermedeiros.com/2011/04/unsolved-html5-video-issues-on-ios/
I gather from your post that this also works in full screen pinned apps and UIWebViews? Is that so?
Thanks for taking the time to post this. Am finally glad email and date fields are supported. I wish that field validations were fully supported.
This information is NDA, you can not publish it on a blog. You are at risk of loosing your iOS Developer Program account by not complying with the agreement. Be careful.
Thanks David for that post!
Also try sunspider in full screen and have a look around for webgl classes…
Anyway, I surpressed all my testing tweets in the end: NDA nerves.
Curious about a question that ppk posted on Twitter: http://twitter.com/ppk/status/78103063554035712
“Safari iOS 5 supports position: fixed. But does anyone know what happens to the fixed element when you zoom?”
Fantastic blog, can you tell me exactly how tested SVG in HTML?
Hmm, apparently html tags in my previous comment were stripped. I was wondering if you have any clue if all the bugs in the video and audio elements are fixed.
[...] is the big one, but some nice iterative improvements as well. David Calhoun has the details. Tagged as [...]
Awesome stuff!
can you guys please test if home screen webapps refresh when launched again?
This was fixed and then taken back from us in 4.3 I think
Has anything been done to fix css3 transitions? Last I checked, the animations were frame-based and also performed on the same thread as javascript, so if you have a lot of intensive js going on while performing a css3 transition, your animation might not finish until something else causes a redraw.
That’s super sweet! It’s about time!
Can you check if Mobile Safari finally opens the keyboard when you activate a contentEditable area?
You can test for example with http://aloha-editor.org/
Good news for Mobile developers! Thanks David!
@Henri Bergius: Well, keyboard comes up but won’t disappear again :/
[...] New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web worker…. [...]
[...] Calhoun has been testing Mobile Safari in the first iOS 5 beta that was announced at WWDC [...]
[...] New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web worker…. position:fixed is the big win as all the work-around hacks are so dirty. [...]
You should not be posting this information on this blog. There has been a complaint submitted against you.
One thing – overflow:scroll was supported since the beginning – but you have to scroll with two fingers instead of one (so that Safari knows if you want to scroll the whole page or just that single element).
But it seems that now you can scroll with just on finger – two finger scrolling on iOS wasn’t that intuitive.
All of you complaining about apples nda should consider that there is NO place this info is available. Apple does not post anything about new mobile safari features until the ios gm. I think until they improve their own docs on safari and make them available earlier, then apple should consider this a service and pay mr. Calhoun.
fantastic post, thanks david.
@Matijs There’s some weirdness going on when you zoom and have position:fixed. David made a video about it: http://www.youtube.com/watch?v=1R-wdGWivjI
Cool!!! Very interesting post!
What about support for contenteditable? Is that in? If so, then maybe we could finally be able to use TinyMCE to provide rich text editing within web apps. Try http://tinymce.moxiecode.com/tryit/full.php to see if it works.
[...] David B. Calhoun – Developer Blog New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web worker… CSS, Javascript [...]
[...] The good news is iOS 5 come with improvement on its Safari too. Apple added some new support for the current already available HTML 5 standard. So now, you can scroll the overflowed content with just one finger. That will mean a lot for my tiny web app. There are also support for various date input format that will display various kind of drop down list for date or time which you can read more about them here. [...]
If only there was mobile chrome on iOS.
How did you got these new features? any resources or references? thanks.
Will ‘fixed’ work with ‘background-attachment’ for fixed background images as well?
isnt this under NDA?
Thanks David!
- UIWebView and home screen web apps now running on Nitro? (expected but not tested)
Could anyone confirm that? Anyone proved it?
Only problem I see with webapps is the elastic effect when you scroll to the end of the pages.
Placing the scrollable content in an overflow:scroll won’t help either because the element only scrolls as the user touches the screen, and stops scrolling when the user removes their finger, instead of smoothly scrolling to a stop and bouncing at the end.
I would really like to prevent the elastic effect on a per-element basis. on ‘html’ and ‘body’, block scroll bounce and inertia, but on a specific DIV that has ‘overflow:scroll’ set, allow bounce and inertia.
Does this mean that if I browse Facebook in Safari on iOS5, the chat window won’t scroll up anymore?
[...] http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-inp… [...]
oh..that’s very good news for me. I expect that you mentioned.
Nice! I guess all the work on ‘scrollability’ of Joe H. won’t be used too much in the near future.
I hope to see all these improvements on other good mobile browsers asap
[...] [00:15:11] iOS 5- und Lion-Scrollgeschichten [...]
[...] iOS 5- und Lion-Scrollgeschichten – Scrolling in den neusten [...]
@Ido, I think you are wrong. Scrollabililty that Joe H. has developed is by far better than the Safari scroll and will be used by many. It’s two different things.
[...] anchor at the bottom or top of the screen. Here is a demo video of the property being used from David Calhoun, which you can check out live on iOS 5 [...]
I just wonder that with overflow:scroll, vertical scroll will work with both one and two finger guesture or just one finger guesture. hope somebody can help. ^^ Thanks
Please advise, is it already available under iOS 5 beta upload document in mobile Safari, for example at http://www.mediafire.com like you can in Android stock browser???
[...] 이글은 New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web worker…라는 글에 기초하여 iOS5 Beta2 에 추가된 아래 기능들을 살펴보는 퀵 [...]
[...] Apple continues to add key functionality to Mobile Safari. The rumors are that iOS 5 will include: [...]
Very helpful summary. Thanks.
For the ‘pickers’, it might help to add near them, to set the value=”…” (use in php):
time: date ( ‘H:i’ );
date: date ( ‘Y-m-d’ );
datetime: still haven’t found it.
month: date ( ‘Y-m’ );
They won’t display the current date/time when the page is loaded, until the user touches them or ‘Next’ or ‘Previous’ across them.
BTW, is that a ‘bug’ that the datetime that Today and Jun 8 are both Wednesdays?
[...] http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-inp… Read more from HTML/CSS iOS5, iPad, iPhone About the author, nyx21 [...]
contentEditable does indeed work like it should and rich text editors such as TinyMCE are fully working.
@Thierry Sure! Glad you enjoyed.
@James Pearce Ah, right you are. I couldn’t get some WebGL demos working, but there are definitely some new WebGL APIs available now.
@Hay I didn’t test those, sorry.
@Alex Yes, unfortunely home scroll web apps still refresh when relaunched, at least on the first beta.
@David I would guess so. As far as I know it’s pretty common for JavaScript to be on the same thread as the UI in most browsers, probably for good reasons (as far as I know).
@Henri Bergius Yep, contentEditable areas do open the keyboard.
@Ola Nope, background-attachment didn’t work for me at least on the first beta.
@Sean Yep, it should work just like it works on desktop browsers now.
@David Sorry, I posted this while in Japan, so I think the timezones got messed up somewhere or other.