Okay, just teasing! My recent experiences creating an HTML5 based mobile web app for iOS has been, on the whole, very pleasant indeed. However, I recently wrote a similarly tilted article “Why Android isn’t ready for HTML5, yet…” which discussed some far more serious bugs I encountered that prevented me getting my App working on that platform, and I thought it might be helpful if I did something similar for iOS.
Issues
So, here are the iOS issues I did run into…
- iOS reports incorrect
window.innerWidthandwindow.innerHeightvalues once it’s been rotated from portrait to landscape mode, and refreshing the page doesn’t help! - CSS Animation + CSS 2D Transform becomes choppy as soon the element(s) involved have a width or height greater than or equal to 1024px (Javascript + CSS 2D Transform and CSS Animation + CSS 3D Transform don’t have this problem).
- Most CSS 2D Transforms can be specified as CSS 3D Transforms by setting the z plane to zero, and doing this causes the GPU to be used (which is good), but also with slightly different results to when only 2D is being used, causing glitchy rendering if the GPU gets switched in and out as transforms are run (which is bad).
- iOS doesn’t yet support SVG inside HTML, which may prevent you using some older libraries — you must serve your document as
application/xhtml+xmlto use SVG within iOS.
Conclusion
Unlike Google with Android, Apple have clearly done enough testing around the types of features mobile web app developers will actually want to use, and the few bugs that do remain can be worked around without too much fuss. Let’s hope Gingerbread brings similar improvements to the Android platform.