CODEWITHSUNDEEP
iphoneioshtmlios5
Crashalot
Crashalot

Reputation: 34503

How to remove white page that appears between splash screen and first page on HTML5 web app on iOS

We have a HTML5 app at www.tekiki.com. A white page appears between the splash screen and the first page on iPhone 4s, and we have no clue how to remove this. The white page only appears on the iPhone and not the desktop.

We have tried setting the background of the element to different colors, and it doesn't make a difference. We thought about programmatically showing the splash screen instead of relying on meta tags, but we prefer the meta tag approach as it automatically shows a different splash screen for taller devices like the iPhone 5.

Can anyone help?

In ideal case, the white page instead has this color, -webkit-linear-gradient(top,#e8e4dc,#f2f0eb), as the background.

Thanks!

Upvotes: 4

Views: 3343

Answers (4)

Andrey Kozlov
Andrey Kozlov

Reputation: 221

As I understand you have WebView which load HTML on AppStart. This seems takes some time and you see just empty WebView for some time after Splash Screen. This is white background.

To solve this you can do some things

  1. Show some Loading screen while WebView loading content and hide it after webpage fully loaded.
  2. Also you can just hide WebView for this time but in this case you need your own Splash screen on time of loading.

Hope this will help.

Upvotes: 0

JWK
JWK

Reputation: 3780

By "only appears on the iPhone," do you mean that the white page appears after the site has been saved to the Home screen or only in Mobile Safari before it has been saved to the Home screen?

If you meant the latter, the startup image will only appear once the site has been added to the Home screen. Therefore, the white screen would simply be the interim while the page is rendering. The suggestions made by coliff would definitely help alleviate that; see my updated below as well.

If you meant the former, I just added the site to the Home screen on my iPhone 4S and did not have any issues with a white page ;) That said, there is a very brief flash of white while transitioning from the startup image to the first page. If you wish to have a smoother transition between the startup image and the first page, the suggestions made by coliff would help there as well–it should be a smooth fade out on iOS 7 and a hard transition on iOS 6.

Update

Also, try making a test page similar to the following. Once it has been saved to the Home screen, you shouldn't see a white page or flash (that I alluded to) after the startup image. This conveys that the issue is certainly related to rendering time if not entirely caused by it.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tekiki</title>

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <!-- iPhone 4 Retina -->
    <link rel='apple-touch-startup-image' media='(device-width: 320px) and (-webkit-device-pixel-ratio: 2)' href='/images/dandy/apple-touch-startup-image-640x920.png'>
</head>
<body>
    <h1>PAGE LOADED!</h1>
</body>
</html>

So, a few more suggestions for optimizing the homepage of the web app:

  • Minify the inline CSS and JavaScript on the homepage, which there is a lot of–-not just the external files! You could even go as far as minifying the HTML too. The savings with this alone may outweigh everything else.
  • According to PageSpeed for Chrome, the images on the homepage could actually be reduced by 63.4KB (26% reduction, which appears to be better than the previously noted 19%); PageSpeed can even generate the optimized images for you.
  • According to this site, you are not using gzip to compress resources and could be saving up to 21.93KB (74.42%).

Upvotes: 1

coliff
coliff

Reputation: 1019

I've reviewed your site and have a number of suggestions to improve performance which would certainly decrease the delay in rendering the page on an iPhone.

  • Optimise all your images (use PNGGauntlet if you're on PC). That would reduce the size of the images on the homepage by 76 KB (19% reduction). Optimising images is lossless so images look identical but will load faster
  • Consider moving JavaScript to the bottom of the page. This is a big bottleneck in rendering the page at present.
  • Minify your JavaScript files - would save 36 KB (28% reduction)
  • Minify your CSS to save 3 KB (24% reduction)
  • Set an expiry date for your images, CSS and JS to enable caching so its faster on second load
  • Not a big deal, but to be update use jQuery 1.10.2 (instead of 1.10.1)

UPDATE: I see that there's JS that detects iPhone and redirects to http://www.tekiki.com/dandy/dandy/. A lof of the advice above stands still, but one thing I noticed - the splash screens you've used are VERY large. The iPhone 5 one is 223 KB, that's not going to load fast. Try exporting as a JPEG or 256-colour PNG to reduce the size. Compress and minify everything you can to optimise performance.

Upvotes: 0

zbMax
zbMax

Reputation: 2818

You have to set all the subviews of your webview and the webview itself non-opaque and with a clear background color.

for (UIView *subview in [myWebView subviews]) {
    [subview setOpaque:NO];
    [subview setBackgroundColor:[UIColor clearColor]];
}
[myWebView setBackgroundColor:[UIColor clearColor]];
[myWebView setOpaque:NO];

then your html code should have this 

<body style="background-color: transparent;">

To finish, set the background of the superview of your webview as you like.

Upvotes: 0

Related Questions