Menu
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 screen appears (i.e. flickers) for about one second.
I'm downloading the app to my phone from the web by using the "Add to Home Screen" button. The javascript file (functions.js) and stylesheet are both very small files.
Has anyone had this problem? Are there any ways to work around/fix it?
index.html
<!doctype html>
<html manifest="demo.manifest">
<head>
<meta charset="UTF-8">
<title>HTML5 Application</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="apple-touch-icon-precomposed" href="[email protected]" />
<link rel="apple-touch-startup-image" href="[email protected]" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="wrapper">...</div>
</body>
<script type="text/javascript" src="function.js"></script>
</html>
demo.manifest
CACHE MANIFEST
index.html
[email protected]
functions.js
style.css
.htaccess
AddType text/cache-manifest .manifest
EDIT #1: I have done some more research and came upon this answer:
Clearing the screen and other artifacts while rendering is a common issue of HTML rendering due to the progressive nature of HTML. The concept is that the browser should draw as early and often as possible and render styles/scripts/content as they become available. It's possible the markup has an issue where all rendering is delayed until some content or a script is available.This could happen if:
- You have dynamic heights based on image dimensions but you haven't set the image dimensions in the markup or CSS.
- Your layout is based on tables and you aren't using 'table-layout:fixed` in CSS.
- Your HTML uses inline scripts with document.write().
- You have some kind of onLoad() function that reveals/modifies content.
- You link to an external stylesheet.
- You're using uncacheable external content or you've disabled caching.
- You're using external content that's returning 404 or isn't available offline.
I have followed all the suggestions in this answer, but it does not rid my web app of the white flicker. Are there any hacks to get around this issue?
EDIT #2: I have tried using no Javascript and a stylesheet with only:
body { background-color: black }
But there is still a white flicker. Since this appears to be an issue with all web applications like this, my question is: Are there any hacks to work around this issue?
897
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 :)
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
