Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Highlighted
New Contributor
Posts: 5
Registered: ‎06-17-2011
My Device: Torch
My Carrier: o2

White screen flashes between page loads

Hi,

Sorry if this is a dupe, I have searched for ages and can not find a solution that works. 

 

I have a webworks app targeting BB OS 5 and OS 6 devices.

 

In between page transistions there is a white flash. This does not happen on any of the simulator, nor does it happen on a Curve device, but it does happen on a Torch device. I have reports of this probelm on multiple Torch devices so its not a one off in our office.

 

The pags fequently fetch data via XMLHttpRequest on the load, so in the config there is loading screen configured, the Background Color is black, there is a foreground image used, but no background image. The loading screen is set to display for all pages -initial startup, local pages and remote pages. It also uses a fade out effect.

 

I have CSS setting HTML and Body to black. 

 

The pages have content even without the XMLHttpRequest so I dont think it is the bug I read about regards whitespace at the end of a screen.

 

It is VERY frustrating and I really want to resolve it ASAP! 


Does anyone have any ideas.

 

BTW - I am coding using Windows, VS and I have the most recent plugin and SDK.

 

Thanks for any support...

New Contributor
Posts: 5
Registered: ‎06-17-2011
My Device: Torch
My Carrier: o2

Re: White screen flashes between page loads

I said it white flash only happens on the device - this is wrong - it also happens on the simulator - the Blackberry Torch 9800 Sim.

New Contributor
Posts: 5
Registered: ‎06-17-2011
My Device: Torch
My Carrier: o2

Re: White screen flashes between page loads

I have now created a test app to isolate the problem. 

 

index.htm 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html><head>    <link     <title>Untitled Page</title><link href="style.css" rel="stylesheet" type="text/css"></link> </head><body>INDEX<br />    <a href="javascript&colon;window.location.href='page2.htm'">GoTo Page 2 via window.location.href</a>      <a href="javascript&colon;window.location.href='page3.htm'">GoTo Page 3 via window.location.href</a></body></html>

 

page2.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html><head>    <meta name="viewport" id="viewport" content="height=device-height,width=device-width,user-scalable=yes" /><title>Untitled Page</title><link href="style.css" rel="stylesheet" type="text/css"></link> </head><body>    Page 2<br />    <a href="javascript&colon;window.location='index.htm'">GoTo Index via window.location</a></body></html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html><head>    <meta name="viewport" id="viewport" content="height=device-height,width=device-width,user-scalable=yes" /><title>Untitled Page</title>        <script language="javascript" type="text/javascript">            function resize() {                document.body.style.height = screen.height + 'px;';                document.body.style.width = screen.width + 'px;';                        }                </script></head><body onload="resize();" style="background-color:Black; color:White;">    page 3<br /> <a href='index.htm'>GoTo Index via a href</a>
</body></html>

 

Clicking between pages aleways creates a white flash.

 

I have tried putting background colour in different places (css / in page / on tag) I have tried resizing the page onload in javascript, I have tried javascript links vs standard A href, I have tried background images using loading page config. I have tested different variations of the meta viewport tag.

 

NOTHING WORKS.

 

I have noticed a couple of times after lots of clicking the flash does not happen. But very rarly.

 

It does this on the simulator and on the device. On the device it is particularly horrible!

 

Does anyone know how to stop this?

Contributor
Posts: 33
Registered: ‎07-08-2010
My Device: Bold 9700/9900 - Playbook v2.0.xxx
My Carrier: Telus

Re: White screen flashes between page loads

Same here. Best I could do was to set the background colour of my webworks app to the same colour of my web page. This would not work in a non-webworks app.

 

Anyone from BB want to comment.

 

I've sean the same issue in IE.

 

In IE, loading the js file in the body and not the head works. Something to do with the js parser.

Another thing you could try is to defer the js file.

 

I'll play with these ideas as well.

 

Ross

Developer
Posts: 125
Registered: ‎01-17-2011
My Device: Playbook
My Carrier: Vodacom

Re: White screen flashes between page loads

Same here .. also have flashing white background when I move between pages.

 

On simulator (Curve 8900 5.0.0.592) its a bit more difficult to pickup since I always get the NULLPointerException when moving from original screen - not sure how to disable this. (even get this with Blackberry UI sample app)

- so on simulator see white screen flicker when using the BACK button to move to previous page (both with black background)

 

On phone - Curve 8900 I get the white screen when moving between pages 

- eg from main menu to another option

- both with black backgrounds

- html and body are set to black, and body height is set to screen height.

- its more noticable than just a flicker - basically screen is white while the 2nd page is still loading (local pages, webworks app)

Developer
Posts: 125
Registered: ‎01-17-2011
My Device: Playbook
My Carrier: Vodacom

Re: White screen flashes between page loads

@TopBananas

 

Just a stab in the dark, but do you use:

 

document.body.style.height = screen.height + 'px';

 

as in

 

	<script type="text/javascript">
		    addEventListener('load', doLoad, false);

		    function doLoad() {
		        document.body.style.height = screen.height + 'px';
		    }
        </script>

 

As for my flashing white background - forgot the config.xml background-color setting.

 

What happens if you set your background to red, green, etc . - do you still get the white flicker .. ?

 

eg in confix.xml.

 

  <rim:loadingScreen backgroundImage="images\background.png" backgroundColor="#ff0000" foregroundImage="images\loading1.gif" onFirstLaunch="true">
    <rim:transitionEffect type="fadeIn" />
  </rim:loadingScreen>

 

.h

 

 

Contributor
Posts: 47
Registered: ‎06-06-2011
My Device: bolt2
My Carrier: digicel jamaica

Re: White screen flashes between page loads

[ Edited ]

Any luck with this you all?

Developer
Posts: 34
Registered: ‎07-14-2011
My Device: BlackBerry Curve 9300
My Carrier: Orange

Re: White screen flashes between page loads

[ Edited ]

I have the same problem with the page transitions and my solution was to change my development approach to use a single html file an put all my application sections on it.

It may take more effort to achieve the desire result but the performance of the application is greatly improved and I haven't seen white flashes between my pages anymore Smiley Happy.

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: White screen flashes between page loads

What you are seeing is the page loading the same way you would see a white flash when you move between pages in a browser (Chrome, IE, Firefox).

 

The browser's default background color is white, so it paints this color until it can read the body's background color CSS styling.

 

There are a couple of things put in place that will address this.

 

1) Set the background color in the <rim:loadingScreen> element in the config.xml of your application.  This will set the background color of your application. When you change between URLs it will paint this color instead of white

 

2) Setup a background and foreground image for the loading sreen and then configure when you want it to show (any combination of: on app start, on local page change, on remote page change).  This loading screen will appear between page loads and disappear when the content of the page has loaded.  You can also configure animations for these loading screens

 

More details on the <rim:loadingScreen> reference

 

 

 

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Contributor
Posts: 33
Registered: ‎07-08-2010
My Device: Bold 9700/9900 - Playbook v2.0.xxx
My Carrier: Telus

Re: White screen flashes between page loads

[ Edited ]

Thanks Tim,

 

These solutions solve the problem of not seeing a 'white flash'. I think what I was trying to do is make the transition to the second, third and fourth etc... pages seamless (most content now cached).

 

In a browser, there are some tricks you can de relating to how you include your js files and layout your divs that help the browser re-paint the screen such that the user only notices the 'changed content'. (changing the inner-html would work are well for this).

 

I know that if your content is using tables, most browsers can not render the next item until it finds the </table> tag. I've changed my application colours to match, and it does improve the look but I'm still working on a more seamless transition.

 

Firefox is good at this IE not so much.