CODEWITHSUNDEEP
javascriptiphonehtmliosweb-applications
JSW189
JSW189

Reputation: 6325

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

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?

Upvotes: 11

Views: 3717

Answers (4)

Barak Binyamin
Barak Binyamin

Reputation: 404

A way to ease away from it looking like a glitch is to add a fade in from white animation, not a complete fix, but it does make the appearance more stable

<html>
<style>
html,body {
  background-color   : black;
  animation-duration : 1s;
  animation-name     : animate-color;
  animation-fill-mode: backwards;
}

@keyframes animate-color {
  0%   { background-color: white; }
  100% { background-color: black; }
}
</style>
<html>

Upvotes: 0

mmm111mmm
mmm111mmm

Reputation: 4085

This problem occurs with even simple sites.

Take this for example: it shows a website with a background of #ccc with a splashscreen of #ccc for the iphone 7.

<!doctype html>
<html style="background-color: #ccc;">
<head>
  <title>iOS web app</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="iOS web app">
  <meta name="viewport" content="initial-scale=1">
  <link href="https://placehold.it/750x1294" media="(device-width: 375px) and (device-height: 667px)
                 and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body style="background-color: #ccc;">
  <h1>iOS web app</h1>
</body>
</html>

https://i.sstatic.net/fcDiW.jpg

You can see a white flicker while the app loads.

Faster loading apps feel worse, slightly epileptic, with the white flash. And if the splash screen is dark, it looks worse again.

Upvotes: 0

KarimSaNet
KarimSaNet

Reputation: 91

Alright, seems like a basic and annoying problem. I think the best way to tackle this would be via AJAX (Asynchronous JavaScript and XML). I'm sure you probably already know what this is, but it's just a way to basically send a request from JavaScript for a file elsewhere and then load it into the page or parse it however you wish.

A little more advanced approach

For your example, I recommend you comment out the line of CSS that has the background-image like this:

.bg-container {
    /* background-image: url(img/bg.png); /* commented out */
}

Note that the second comment just makes it easier to comment and uncomment the one line while debugging your code.

Now just add a simple img tag to your body, and make the src of it an ajax loader (you can find the spinning wheel generators anywhere). From here you can write some JavaScript to load the image, get rid of the spinner, and replace it.

Two simpler approaches

This solution doesn't appeal to me, I don't think most people would like it anyways. That's why I use 'Bootloader.js' which is a little AJAX loading tool I wrote a couple of months ago to help people with these sort of problems.

It's easy to use, aside from the script include, just add this meta tag:

<meta name="bootloader" content="enabled,forms('selectorOfForms'),a('selectorOfAnchors')">

The forms and anchors is optional, if you use it, it will make all your forms and links asynchronous (not for cross-domain use yet). The forms are not easy to setup, you can read the documentation on that if you would like.

Finally, set up your body like this:

<body>
    <div id="body">
        <!-- All the content should go here -->
    </div>

    <!-- This will disappear on first ajax load -->
</body>

And there you have it, this will handle everything for you.

Final suggestion

If you don't like any of these options, or want a limited yet customizable option, I recommend you use Image LazyLoader by Mika Tuupola (included with Bootloader.js) and also available at: http://www.appelsiini.net/projects/lazyload

Tell me how it goes, and what you use! XD

Upvotes: 0

Matt Melton
Matt Melton

Reputation: 2643

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 :)

Upvotes: 1

Related Questions