White screen example

[Jon Tara]

I thought I would start a new thread with an example showing the "white screen" problem. We are not imagining this. Just run this simple sample. It is just a default generated app with a native tabbar added. I put /app/Settings in each of three tabs, as well as setting that as the start path. I used :use_current_view_for_tab => true, on the first tab. I did this to make it as close as possible to my real app while keeping it simple.

You will need to edit build.yml with your developer credentials. The problem can only be demonstrated on a device. The simulator running on OSX is too fast to show the problem.

I have tested this on an iPhone4 with iOS 4.3.5 and iPhone 4S with iOS 5.0.1.

The problem does not seem to occur until you add a native tabbar. From the comments of others, it seems it will also occur if you use a native toolbar.

You will see the splash screen, then the native tabbar will appear with a white screen above it. You will see the white screen for about 2 seconds. This might be acceptable, except that in a real app that is loading more JS and CSS, and with a more complicated page, the time can be much longer - perhaps a few seconds.

You can clearly see that you will get the white screen again when switching to each of the other two tabs for the first time. Looking at the log, there is obviously no attempt to pre-load the other two tabs. Loading doesn't start until the first time the user touches the tab. Even the two-second white screen is unacceptable when you switch tabs for the first time. It makes the app look amateurish. The page should preferably be pre-loaded (or provide an option for the developer to decide whether to pre-load or not) when the application loads. I suppose it could not show the new page after touching a tab until the page has loaded, but I think that might be just as obnoxious as the white screen.

2 seconds might not seem much, but that is the absolute minimum that is possible with a practically do-nothing app.

[Jon Tara]

I've attached a log so that you can examine the timing. I waited quite some time between touching each of the tabs 2 and 3 so that you can easily pick that out in the log. I was careful to delete the browser cache in iPhone Settings first, though I'm not clear that this effects UIWebViews.

I doubt that this is related, but I find these log entries below troubling. Can somebody familiar comment?

Feb 28 11:37:18 unknown rhorunner[4432] <Warning>: root view: <UIView: 0x51451a0; frame = (0 0; 320 411); autoresize = W+H; layer = <CALayer: 0x4fdd5f0>>

Feb 28 11:37:18 unknown rhorunner[4432] <Warning>: root view: <UIView: 0x4fe6270; frame = (0 0; 320 411); autoresize = W+H; layer = <CALayer: 0x4fdcaf0>>

Feb 28 11:37:18 unknown rhorunner[4432] <Warning>: root view: <UIView: 0x4fbf890; frame = (0 0; 320 411); autoresize = W+H; layer = <CALayer: 0x4fbfd60>>

[Dmitry Soldatenkov]

Hi,

Situation with native TabBar is complicated.
I recommend next sequence for remove white splash:

Do not create Native Tab Bar on start - use simple page and setup
startup URL the same with your first page in TabBar

In this case only after this page totally downloaded the splash image
will remove from screen - no white blink

Process event when page totally loaded and execute controller code for
make NativeTab bar with :use_current_view_for_tab => true for first
tab

In this case TabBAr was created with no reload first page - just
transfer WebView to first Tab in TabBar - no white blink too

You can try to load all pages in tabs by call WebView.navigate with
tab index for each tab (of course your tabs should have
:reload=false), but this code will not works on Android because
Android do not work correct with non onscreen WebView - we processed
it and when tab will appear - we reload it. But on iPhone that trick
should works.

If you want use reload=true tabs - use setup of background color for
tab - - it reduce blinking for not-white-bkg pages.

> --
> You received this message because you are subscribed to the Google Groups
> "rhomobile" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/rhomobile/-/rrbThiBYR0AJ.
> To post to this group, send email to rhom...@googlegroups.com.
> To unsubscribe from this group, send email to
> rhomobile+...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/rhomobile?hl=en.

--

Best regards,
  Dmitry A. Soldatenkov
  E-mail: dmi...@rhomobile.com
  Skype: soldatenkoff

[Rob Roberts]

Has anyone tried Dmitry's suggestion for getting rid of the "white
screen" problem when using the native TabBar? It sounds rather messy,
so before I spend a bunch of time trying to get it to work I thought
I'd ask whether anyone else has had any luck with it.

Thanks,
--Rob Roberts

>   E-mail: dmit...@rhomobile.com
>   Skype: soldatenkoff

[Tashbayev]

+1

2012/3/6 Rob Roberts <ro...@pcisys.net>

--
-Sergey

[Jon Tara]

You can try to load all pages in tabs by call WebView.navigate with
tab index for each tab (of course your tabs should have
:reload=false), but this code will not works on Android because
Android do not work correct with non onscreen WebView - we processed
it and when tab will appear - we reload it. But on iPhone that trick
should works.

Unfortunately, that doesn't work on iPhone either. I'd already tried that.

What happens is that it does indeed pre-load the tabs. But when you press the tab the first time, it re-loads, unnecessarily.

You very briefly see the complete page, then it goes white and re-loads the page. Yes, this is without :reload => true.

I'll give the trick for the first tab a try, but I am concerned about the page size being changed, then the tab being drawn. Hoping none of that is visible.

[Rob Roberts]

Thanks Jon for letting us know that the trick of pre-loading the tabs
doesn't work to solve the white screen problem when going to a tab for
the first time.

--Rob Roberts

[Jon Tara]

So, sounds like the re-load code needs to check first if the platform is Android.

[Dmitry Soldatenkov]

You want setup default background color for tab and replace "white
screen" to other color screen.
See our RHodes-System-Api-Samples for example.
:web_bkg_color parameter.

> --
> You received this message because you are subscribed to the Google Groups "rhomobile" group.
> To post to this group, send email to rhom...@googlegroups.com.
> To unsubscribe from this group, send email to rhomobile+...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/rhomobile?hl=en.
>

--

Best regards,
  Dmitry A. Soldatenkov
  E-mail: dmi...@rhomobile.com
  Skype: soldatenkoff

[Jon Tara]

That's not an acceptable solution. It just somewhat masks the problem. Anyway, my background is white. ;)

The additional tabs (after the first one) are being unnecessarily loaded again if they have already been pre-loaded.

I understand that on Android, it can't be rendered off-screen. But no reason to load a second time on iOS if the webview has already been loaded.

[Rob Roberts]

Has anyone gotten the "change tab background color" hack to work to
hide the white screen flash when a tab loads for the first time? I've
tried the :web_bkg_color parameter as Dmitry suggested, but I can't
get it to work. I tried the Rhodes-System-Api-Samples tabbar example,
and it doesn't seem to be working there either. If you tap any of the
TabBar links ("TabBar with disabled tab", "TabBar customized", "TabBar
test with more than 5 tabs", "TabBar with tab change callback"), the
page reloads with the :web_bkg_color background color, but the white
screen flash happens first!

--Rob Roberts

> > For more options, visit this group athttp://groups.google.com/group/rhomobile?hl=en.

>
> --
>
> Best regards,
>   Dmitry A. Soldatenkov

>   E-mail: dmit...@rhomobile.com
>   Skype: soldatenkoff

[Alexey Braginenko]

Hi Dmitriy,
can post this example on github.
Thanks

On Feb 28, 2:14 pm, Dmitry Soldatenkov <dmit...@rhomobile.com> wrote:
> Hi,
>
> Situation with native TabBar is complicated.
> I recommend next sequence for removewhitesplash:
>
> Do not create Native Tab Bar on start - use simple page and setup
> startup URL the same with your first page in TabBar
>
> In this case only after this page totally downloaded the splash image
> will remove fromscreen- nowhiteblink
>
> Process event when page totally loaded and execute controller code for
> make NativeTab bar with :use_current_view_for_tab => true for first
> tab
>
> In this case TabBAr was created with no reload first page - just

> transfer WebView to first Tab in TabBar - nowhiteblink too

>
> You can try to load all pages in tabs by call WebView.navigate with
> tab index for each tab (of course your tabs should have
> :reload=false), but this code will not works on Android because
> Android do not work correct with non onscreen WebView - we processed
> it and when tab will appear - we reload it. But on iPhone that trick
> should works.
>
> If you want use reload=true tabs - use setup of background color for
> tab - - it reduce blinking for not-white-bkg pages.
>
>
>
>
>
>
>
>
>

> On Tue, Feb 28, 2012 at 11:37 PM, Jon Tara <jtara-google...@spamex.com> wrote:
> > I thought I would start a new thread with anexampleshowing the "white

> >screen" problem. We are not imagining this. Just run this simple sample. It
> > is just a default generated app with a native tabbar added. I put
> > /app/Settings in each of three tabs, as well as setting that as the start
> > path. I used :use_current_view_for_tab => true, on the first tab. I did this
> > to make it as close as possible to my real app while keeping it simple.
>
> > You will need to edit build.yml with your developer credentials. The problem
> > can only be demonstrated on a device. The simulator running on OSX is too
> > fast to show the problem.
>
> > I have tested this on an iPhone4 with iOS 4.3.5 and iPhone 4S with iOS
> > 5.0.1.
>
> > The problem does not seem to occur until you add a native tabbar. From the
> > comments of others, it seems it will also occur if you use a native toolbar.
>

> > You will see the splashscreen, then the native tabbar will appear with a
> >whitescreenabove it. You will see thewhitescreenfor about 2 seconds.

> > This might be acceptable, except that in a real app that is loading more JS
> > and CSS, and with a more complicated page, the time can be much longer -
> > perhaps a few seconds.
>

> > You can clearly see that you will get thewhitescreenagain when switching

> > to each of the other two tabs for the first time. Looking at the log, there
> > is obviously no attempt to pre-load the other two tabs. Loading doesn't
> > start until the first time the user touches the tab. Even the two-second

> >whitescreenis unacceptable when you switch tabs for the first time. It

> > makes the app look amateurish. The page should preferably be pre-loaded (or
> > provide an option for the developer to decide whether to pre-load or not)
> > when the application loads. I suppose it could not show the new page after
> > touching a tab until the page has loaded, but I think that might be just as
> > obnoxious as thewhitescreen.
>
> > 2 seconds might not seem much, but that is the absolute minimum that is
> > possible with a practically do-nothing app.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "rhomobile" group.
> > To view this discussion on the web visit
> >https://groups.google.com/d/msg/rhomobile/-/rrbThiBYR0AJ.
> > To post to this group, send email to rhom...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > rhomobile+...@googlegroups.com.
> > For more options, visit this group at
> >http://groups.google.com/group/rhomobile?hl=en.
>
> --
>
> Best regards,
>   Dmitry A. Soldatenkov

>   E-mail: dmit...@rhomobile.com
>   Skype: soldatenkoff

[Alexey Braginenko]

Sorry , i ment can you post this example on github?

> > For more options, visit this group athttp://groups.google.com/group/rhomobile?hl=en.

>
> --
>
> Best regards,
>   Dmitry A. Soldatenkov

>   E-mail: dmit...@rhomobile.com
>   Skype: soldatenkoff

[Rob Roberts]

No one from the Rhodes team has been able to come up with an example of how to avoid the white screen flash when using the native TabBar? Is it currently not possible?

Sorry to sound like a broken record on this, but this is a serious problem. It makes the TabBar pretty much unusable. (Sure, the navigation with it works fine, but the white flash looks terrible. It makes the app look really amateurish.)

Please Rhodes team, can we get a fix for this?

Thank you,
--Rob Roberts

> > To unsubscribe from this group, send email to rhomobile+unsubscribe@googlegroups.com.

[ad...@rhomobile.com]

It looks like your question was answered below

To view this discussion on the web visit https://groups.google.com/d/msg/rhomobile/-/SkFIPgcC1k8J.

To post to this group, send email to rhom...@googlegroups.com.

To unsubscribe from this group, send email to rhomobile+...@googlegroups.com.

[Rob Roberts]

I apologize if the answer was posted and I missed it, but I'm still not seeing it. Are you saying an example was posted on github? I've checked the Rhodes repos here: https://github.com/rhomobile. But I don't see the example. Can you please point me to the right one?

Thank you,

--Rob Roberts

On Wednesday, March 28, 2012 4:27:05 PM UTC-6, ad...@rhomobile.com wrote:

It looks like your question was answered below

[ad...@rhomobile.com]

I'm saying it looks like Dmitry answered your question 

--
You received this message because you are subscribed to the Google Groups "rhomobile" group.

To view this discussion on the web visit https://groups.google.com/d/msg/rhomobile/-/bhWihPINposJ.

[Jon Tara]

I don't think there's really an "example" to post.

Summary of my understanding of where this stands:

1. If not using a native tabbar, there should be no problem for the first page displayed. The splash screen will stay until the first page has been loaded.

2. If not using a native tabbar, there should be no further white flashes, since JQuery Mobile always completely loads pages before the page transition.

3. If using a native tabbar, you can avoid the white flash on the first tab displayed by not setting-up the tabbar in application.rb. Instead, use a callback on JQM pageload event to some controller that will instantiate the native tabbar using the use_current_view_for_tab option. This is probably going to have a side-effect, though, that the page will first display full-screen, and the the tabbar will be displayed and the page re-sized.

4. If using a native tabbar, the white flash on additional pages is unavoidable for Android because of a timing issue. A browser window can't be rendered when it is not not visible, so pre-loading tabs is not effective, and Rhodes forces them to re-load when the tab is selected the first time.

5. If using a native tabbar and using iOS, the white flash on additional pages could be avoided by pre-loading tabs, BUT the code that work's around the Android problem in (4) forces a re-load of the tab, producing the white flash. This should be fixed in Rhodes.

6. You can screw around with background colors in an attempt to minimize the appearance of the flash.

IMO, this still needs attention from the Rhodes team.

[Rob Roberts]

Thank you Jon for the summary of  the white screen problem as it now seems to stand.

>>  I'm saying it looks like Dmitry answered your question.

Sorry Adam, but I do not see Dmitry's answer to the question.  That's why I'm asking about it.  Are you referring to his answer from March 7th:

>> You want setup default background color for tab and replace "white
>> screen" to other color screen.
>> See our RHodes-System-Api-Samples for example.
>>:web_bkg_color parameter. 

If so, I tried the TabBar example in rhodes-system-api-samples, and the white screen problem happens in it. The page does reload with the :web_bkg_color as the background color, but only after the white screen flash happens first.

If that's not the answer you're referring to, please point me to the right one.

Thank you,

--Rob Roberts  

[Dmitry Soldatenkov]

Hi,

"web_bkg_color" fixed on iOS.

> --
> You received this message because you are subscribed to the Google Groups
> "rhomobile" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/rhomobile/-/tphUVAVFF2IJ.

>
> To post to this group, send email to rhom...@googlegroups.com.
> To unsubscribe from this group, send email to
> rhomobile+...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/rhomobile?hl=en.

--

Best regards,
  Dmitry A. Soldatenkov

  E-mail: dmi...@rhomobile.com
  Skype: soldatenkoff

[Rob Roberts]

Thank you very much, Dmitry!

--Rob Roberts

> rhomobile+unsubscribe@googlegroups.com.

> For more options, visit this group at
> http://groups.google.com/group/rhomobile?hl=en.