(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
is access to the camera now possible with the html5 capture API? I need this for an webapp (otherwise I have to build a native app
)
Thanks,
Marco
[...] as position:fixed is not supported although there are some javascript fixes (although I believe ios5 is implementing it natively as we speak). The problem with position:fixed is that you must make sure that the content stays [...]
[...] iOS5即将更好的支持position:fixed;属性，加上android早在2.2就已经实现，以后要实现类似效果就不用再这么折腾了。但在这之前如果不用框架的话，还是离fixed远点的好 [...]
[...] iOS5即将更好的支持position:fixed;属性，加上android早在2.2就已经实现，以后要实现类似效果就不用再这么折腾了。但在这之前如果不用框架的话，还是离fixed远点的好 [...]
[...] New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web worker… This entry was posted in jQuery Mobile. Bookmark the permalink. ← 【YouMeb開發日誌】為什麼是Mobile Web？ [...]
Thanks for the description of the date Object in iOS5!
[...] Input Elements: Mobile Safari provides touch-centric form inputs to ease the user’s entry task. Added in iOS 5 are new types date, datetime, month, time and [...]
[...] 除了上面说的两个新特性外，在HTML5方面，IOS5还增加了一些对Input的支持，如date, datatime, month, time, range的支持，还有对于Web Workers, ECMASCRIPT 5, inline SVG, float32array, int8array, int16array, int32array in JavaScript, MathML, -webkit-linear-gradient等，via http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-inp… [...]
[...] Requires iOS5+ for the names list to scroll. [...]
[...] B. Calhoun has written an excellent article about what has changed, check it out! Follow @thinkvitamin on Twitter Please check out Think Vitamin MembershipOther Posts You Might [...]
[...] P.S. here are some more articles about CSS3 and HTML5 for iOS: Implications of iOS 5 webkit-overflow-scrolling New Mobile Safari stuff in iOS5 [...]
[...] New Mobile Safari stuff in iOS5 作者: 神飞 爱好前端设计与开发，崇尚一目了然的设计。现居深圳。 Follow me on twitter @qianduan。 如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。 [...]
[...] New Mobile Safari stuff in iOS5 [...]
..And font in .woff is now supported
[...] New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web worker…; [...]
[...] haben viele weitere kleine Änderungen Einzug in iOS 5 gefunden. An dieser Stelle sei auf die hervorragende englischsprachige Übersicht von David B. Calhoun [...]
seems like none of your demo pages are working :/
@LS: Sorry about that, I was moving some stuff around. It should work now.
I’ve been working on a web app that is optimized for the iPad and iPhone. We have been using iScroll but now I am working on changing it over to fixed positioning using the new ios features. So glad that we can do this now. I was having a lot of problems with iScroll.
Here is my demo that I have been working on. Visit on ipad with ios5.
http://www.miketheindian.com/test02/ios5
[...] Safari enhancements in iOS 5 This entry was posted in Random by . Bookmark the permalink. [...]
Hi,
I am working on a mobile app that contains a fixed footer. We fixed our footers with position: fixed; for all iphones with iOS 5. However, only on the new iphone 4s (which has the same exact OS 5 as the iphone 4 I tried this on) when you click on the button on the bottom footer to refresh the GPS and press ok on the alert, the footer moves up to 2/3 the way up the screen. On the iphone 4, it appears at the bottom after you click gps refresh and press ok on the alert. Do you have any idea as to why this difference is occurring since both phones have the exact same OS 5 installed?
It is such a strange problem. Help would be much apprecciated.
Thanks,
Megan
good information, thanks for this share.
I just wanted to make a quick note about inputs with a type of “number”. We recently had a mobile website application break on iOS5 devices that were using input type=”number” to gather a user’s zip code. The reason for this seems to be that iOS5 will now format a number such as “55555″ as “55,555″, which is obviously not a valid zip code. If you plan on using this, you should be aware you’ll need to clean the inputs to remove the commas.
That’s such a shame about file uploads. Thats one of the main things stopping me from building really useful HTML5 web apps.
I reckon they have purposely disabled file uploads so apps are a necessary evil. However Steve Jobs’ original idea was to only allow web apps on the device so you would think file uploads would be essential.
[...] http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-inp… [...]
[...] 除了上面说的两个新特性外，在HTML5方面，IOS5还增加了一些对Input的支持，如date, datatime, month, time, range的支持，还有对于Web Workers, ECMASCRIPT 5, inline SVG, float32array, int8array, int16array, int32array in JavaScript, MathML, -webkit-linear-gradient等，via http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-inp… [...]
[...] New Mobile Safari stuff in iOS5 [...]
[...] New Mobile Safai Stuff in iOS5 http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-inp… [...]
I believe that the above content is great post !!!
love the safari surf !!
Thanks for the update
thanks for this post – was ever so usefull! no more iScroll for me !
Just want to point out tho,on the iPad 1 (ios5.0.1), if any elements inside a’-webkit… :touch’ scrollable div have any sort of ‘opacity’ css on them, some ugly refresh failures occur when these elements come into view!
Thanks for the post.
We are developing a mobile application. while entering the zip, its getting converted by comma(,). Doe eg. “55555″ as “55,555″. Can any one plz help how to code to remove comma(,), else any attribute/element types to rectify it.
Stuff is developed using iOS5.
Regards,
Sridhar.
I think there -is- a problem with the position:fixed implementation in iOS5 / 5.1, even though it will go unnoticed for most usage.
) make it hang. Removed ‘position:fixed’ from the css and problem solved :-/
When rendering html in an offscreen web-view, ‘position:fixed’ confuses iOS to the point that when the view is supposed to scroll into sight, it crashes. Just spend 2 days debugging my news-app to find out why certain sites (Techcrunch
Note: this does not happen on all combinations of devices/simulators and iOS versions 5+, but it does show the actual implementation is still up for improvement.
[...] some more articles about CSS3 and HTML5 for iOS: Implications of iOS 5 webkit-overflow-scrolling New Mobile Safari stuff in iOS5 [...]
[...] 5 will have support for position:fixed. Tagged: CSS, iPhone, jquery, position, questions, touchscreen /* * * [...]
[...] 除了上面说的两个新特性外，在HTML5方面，IOS5还增加了一些对Input的支持，如date, datatime, month, time, range的支持，还有对于Web Workers, ECMASCRIPT 5, inline SVG, float32array, int8array, int16array, int32array in JavaScript, MathML, -webkit-linear-gradient等，via http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-inp… [...]
Hi and many thanks for this
I implemented your suggestion and it rocks. The only problem is, it overrides the text I used to have on the input box (form), for the user to know what that box is for. How do I fix that. Any suggestions? Thanks.
Best
[...] New Mobile Safari stuff in iOS5 [...]