White flicker between launch image (splash screen) and app homepage

Question

I have a very simple HTML5 iPhone web application that works almost perfectly; there is only one issue: between the launch image and the app homescreen, a completely white s

Answer 1

CSS selectors are pretty slow on iOS (greedy CSS reset scripts have terrible performance too).

Head initiated javascript self loading DOM-ready scripts and CSS selectors running together compound the issue further. As you have both CSS and javascript requests in the head, there is a small but appreciable delay processing the body, especially the body's background colour.

Most HTML5 frameworks are moving to deferred script loading. As a minmum you want to get the stylesheet loaded first and worry about javascript second. Try putting the css at the top and scripts at the bottom, then inlining a default background colour (not image - there's an appreciable delay on iOS 5 rendering scaled background images and CSS gradients).

You can also try the async attribute on iOS5+, but I haven't tried it myself.

Hope this helps :)