Last October we reviewed the web implementation in iOS7.0. We were disappointed in the release, and said that “the sheer number of bugs and broken features, clearly mark this release as a beta”. Now that iOS 7.1 has just shipped, we decided to revisit our assessment and see how much progress Apple has made polishing the product.
TL;DR The good news is that the majority of bugs, broken features and performance regressions have been cleaned up. For example, we’re back to 60 fps performance for SVG animation, and Home Screen Apps seem to be working just fine again.
Table of Contents
Home Screen Apps Back Again
The biggest news for web developers with iOS 7.1 is that Home Screen App functionality seems to have been fixed. This is good news, because Home Screen Apps were horribly broken in iOS7, with disabled alerts, hard crashing bugs and other wacky behavior. Apple now also provides a new meta tag to trigger (almost) full-screen on page load. The new meta tag is called “minimal-ui” and it loads a page with the toolbar hidden and the top URL bar minimized to the domain name. Unfortunately, minimal-ui breaks Sencha Touch 2.3 viewport position on iOS 7.1 when rotating from portrait to landscape. So thanks to Steffen Hiller for finding the bug and also for creating a workaround for minimal-ui breaking landscape.
Bug Fixes In Content Handling
iOS7.1 fixes almost every bug we found in iOS7.0 content rendering and animation:
- Interactive elements that are near page borders now get focus properly when swiping left or right (instead of triggering the page back/forward action in the browser).
- requestAnimationFrame animations now properly suspend when in a non-active tab
- Web workers now properly suspend when in a non-active tab
- Implicit z-indexes are now properly calculated before CSS animations fire
- On iPad, changing orientation while an input has focus now seems to work just fine and the bug related to document height 100% seems to also have been fixed.
We do note that window.resize still doesn’t seem to fire when the URL bar and toolbar are minimized, although if you’re using the minimal-ui meta tag because you have bottom positioned content (for example) you shouldn’t run into this.
Performance
In our original iOS7.0 scorecard, we noted a number of performance gains and regressions vs. iOS6. On the positive side, JavaScript peformance (Sunspider and Octane) improved a lot and SVG long path drawing got an enormous boost (200x). On the downside, JavaScript animation of SVG was crippled.
The good news with iOS7.1 is that JavaScript animation of SVG is now high performance. The 500 bouncing SVG balls test that was crawling along at less than a frame per second, is now at 60 fps on iOS7.1. SVG Animators rejoice! There do not seem to be any other significant performance changes. Canvas is still super fast, and DOM Query is still half the speed of iOS6.
Great Quality Improvements, But No New Features
iOS 7.1 is a bug fix release that fixes almost all the issues we found in the rushed-to-market iOS7. While there are no new HTML5 features that we (or HTML5Test) could see, web developers can once again rely on Apple’s best in class browser for building HTML5 applications. We continue to expect Apple to introduce WebGL, Web audio, and more HTML5 features in a future release to be on par with the HTML5 features being introduced by Google, Microsoft, and Blackberry to their mobile platforms.
Thanks for writing this. Most reviews of iOS 7.1.0 are all about minor style changes that I could not care less about. Sencha delivers me the real goods regarding JavaScript, and I appreciate it. Thanks!
Great to know the homescreen shortcut issue is resolved, that was causing me _major_ problems.
The page height bug is still present in landscape mode on iPad
(visit google.com and you won’t see the full footer)
It’s disappointing that Safari still doesn’t offer IndexedDB, and that CSS Flexbox is still prefixed.
@marek – let me check that – my test page seemed to work.
@marek. I checked my test page again and this has been fixed. It might be a different bug you’re looking at. The bug we reported was that on iOS7.0, when you had a 100% height page in landscape mode, the whole page was shifted up by 20px thereby scrolling the top 20px of the page off screen when the page loads. On iOS7.1 – this no longer happens, the top edge of the page is now correctly positioned on-screen.
Hi, the Japanese translation of this blog article is here: http://www.xenophy.com/sencha-blog/10758
Link to the Japan Sencha User Group: http://www.meetup.com/Japan-Sencha-User-Group/
Fyi, there are two issues when using “minimal-ui” together with Sencha Touch 2.3.1a.
Here’s the workaround I’m using:
https://staging.sencha.com/forum/showthread.php?282632-2.3.1a-quot-minimal-ui-quot-breaks-viewport-position-on-iOS-7.1-when-rotated-to-landscape&p=1035259#post1035259
After loading iOS 7.1 My Audible App no longer functions correctly when I have it in iTunes mode it crashes. In fact if I try to open it in iTunes mode it will not open after the first crash and I have to restart my iPad Air to get it to open at all. I can reload it but I loose my badges and listening credits, which is very annoying.
I just updated my iphone4 to ios7.1. Since then, my programs do not rotate when I change the rotation of my phone. Is there a problem with ios7.1? Please help.