Imagine you are working on a project targeted for the iPad, Chrome and Safari that should contain an interactive HTML5 video… Design and feature-wise the project seems pretty simple and since you assume that the newest Webkit browsers have a good support for CSS3/HTML5/JavaScript (and Steve Jobs says it’s “amazing”) you shouldn’t have any issues building it, especially since you have coded many video players and interactive videos using Flash before and you are pretty experienced with HTML/JS projects and have used HTML5 video and CSS transitions/animations on a couple other projects.. A couple weeks of development should be fine… – Now you have a big problem.



Since the last year with all the hype around HTML5 and the buzz about “how HTML5 is going to save the web” and that “flash is dead”, etc… A lot of people started to believe that HTML5 is ready for production and that it is more stable and have better performance than Flash… Since the beginning I’ve been saying to everyone that it isn’t true and it won’t be for a long time. Why not? because every single platform have bugs, and it takes years to find, document and fix all of them, and more complex systems have more room for problems… – Browsers don’t even support all the CSS 2.1 features that I’ve read about on specs and blogs around 5 years ago (yes, I read the “whole” CSS 2.1 spec back then and got frustrated since I couldn’t use the cool features..).

Yesterday I’ve sent this on twitter and I really mean it:

People complain that Flash have bugs only because they never tried to do anything “complex” using HTML5 video on the iPad.. – Miller Medeiros, Jan 2011

Things that you would take for granted like seeking to a specific time, preloading/buffering a video on the background, starting a video without user interaction, having multiple videos on the same page, testing on the simulator, looping the video after end, etc… simply won’t work the way you expected without hacks or even worse, some of them don’t work at all.

The worse part of it is that you can’t simply search blogs/forums or look the documentation to figure out how to solve the problems, since “nobody” knows how to do those things, information gets outdated really fast with the release of a new OS version, documentations are very poor and doesn’t cover edge-cases, specs are constantly changing and different versions of iOS adopt a different set of rules and to add to the mix Apple is also creating many proprietary features…

Why am I having this kind of issues? Because a lot of people have been advertising that HTML5 can totally replace Flash and even that it is better than Flash, it may be true depending on the kind of project, but for heavily interactive/multimedia content Flash still the best available option… People are expecting too much of HTML5 and unfortunately the browsers can’t deliver it yet.

I’m saying that the iPad is the new IE6 because we are expecting it to be something that it isn’t, the same way that we were expecting that IE6 would have the same features/performance/reliability than the latest versions of Firefox/Safari. It takes years and many iterations to a technology become “stable”, early adoption of standards and poor implementation leads to headaches. It happened with IE6 and it is happening with the iOS Safari right now.

It took years for the community to learn how to deal with IE6 and to solve many bugs, the “problem” nowadays is that the release cycle of the browsers is so short and there are so few people doing this kind of things that the solutions for most problems may come “too late”. Nowadays it usually takes me less than 1 hour to make a website that I coded during 2 weeks testing only on Firefox to run on IE 6-7, but it took me 3 days to make something that I coded in 1 day testing on Chrome to run on the iPad (almost the same ratio of when I didn’t knew how to fix/avoid IE problems..) – and no, I’m not exaggerating/kidding.

Important notes:

HTML wasn’t created for dynamic/interactive content, it was created to present academic documents.

JavaScript performance on iOS is 100x worse than desktop.

Canvas performance on iOS is so bad that it is barely usable.

A lot of people don’t upgrade their software, iOS 3.2 is completely different than iOS 4.2 and you should support both.

The iOS simulator is different than the actual device.

It is very important to note that every single Webkit browser works differently and that older versions of the iOS have many bugs and missing features (the new ones as well) .

. Chrome and Safari have a bunch of rendering problems related with HTML5 video and CSS3 as well when you start overlaying content and adding CSS transitions.

Android 2.0-2.2 also have many bugs related with HTML5 video.

Using specs as documentation can be really frustrating when things don’t work as described and/or if the specs changed since the feature was implemented.

Apple bug tracker sucks, you can’t even see if anyone reported the same bug before, I won’t post anything there because of that and because I don’t agree with the company policy… - If you are a jerk, I will be a jerk with you as well…

If it works well the end user will not care about which technology was used to create it.

Don’t believe in keynotes, even better, don’t watch them…

Maybe I will write a new post after I finish the project explaining the bugs (with example files) and how to solve them. But I don’t promise anything and if I do it, it should take a while since I’m really busy now fixing bugs :(. For now you will have to believe that the bugs exist, if you don’t believe me, just search stackoverflow for it, here are a few examples:

I managed to solve some of those problems and a couple more but didn’t had time to reply to the questions yet since I’m really busy and I don’t even know exactly how I fixed some of the problems (I will have to spend a long time reading the notes I left on the source code and isolating the problems).

TL;DR

The closer you are to edge the more problems you will find. Every software/platform has bugs and HTML5 still very young and at “beta quality”, stop spreading lies.