Screen flash on navigation with WP8

[Kenneth]

I am porting an android/iOS kendoui mobile app to wp8. There is a very pronounced what screen that flashes on every navigation. I'm not doing anything special. Has this been reported by others? Is there a fix?

[Kamen Bundev]

Hello Kenneth,

This is not a known issue, can you provide a sample page where we can reproduce it? Thank you in advance.

Greetings,
Kamen Bundev
the Telerik team

[Kenneth]

In trying to pull together a simple solution to illustrate the issue - I discovered the root cause.

When navigating to these views I am updating the view-layout elements' href attributes. This is what is causing the flash. It works fine in android/ios.

I am going to look at switching to using an onclick in instead of changing the href, to see if I can avoid the flash.

[Kenneth]

The onclick idea also works in iOS and android - but still causes the flash on wp8. As long as I am using a static href for the tabstrip element there is no flash, when I try to dynamically change the href, or to dynamically navigate using the onclick - I get the flash.

Any ideas?

[Kenneth]

Have developed a sample app that demonstrates the issue. If a tabstrip item href as a query string it will cause the flash in WP8.

This technique is very useful in managing program state, would require some significant work arounds for my app, and works fine in android/iOS. Anyone have any ideas?

[Kenneth]

Any thoughts? After looking at several possible ideas, came down to having a query string in an href causes the flash. Sample code attached earlier in thread that demonstrates this.

[Kamen Bundev]

Hello Kenneth,

No ideas yet, I've ran through our code and concluded this is something PhoneGap related - the query strings trigger something there. However up until now I wasn't able to nail the issue down. I'll get back to it tomorrow. On a side note the loading animation fix didn't get it in the today's internal build, it will be in the next one tomorrow.

Greetings,
Kamen Bundev
the Telerik team

[Kamen Bundev]

Hello Kenneth,

We managed to nail it down - the flash seems to be caused by a bug in the WP8 WebBrowser control that is used both in PhoneGap and HTML5 apps. The bug causes a screen flash when location.hash is changed with a string that has a question mark in it. This is contrary to the spec - the hash fragment doesn't need to be encoded at all. We will try to come up with a proper solution for this issue for the service pack. Meanwhile you can URI encode the question mark before navigation. Unfortunately this can't be done directly in the TabStrip URLs - we need to override the ViewEngine's navigate event. Try adding this handler to your initial View init event:
function replaceNavigate() {
    app.pane
        .unbind("navigate")
        .bind("navigate", function(e) {
            app.router.navigate(e.url.replace("?","%3f"), true);
        });
}

Let me know if this fixes the issue.

Regards,
Kamen Bundev
the Telerik team

[Kenneth]

This worked - although I had to change the logic for parsing the query string. But - no flash. Thanks.