swipe issue in ios 7

[JonathanElsner]

In ios7, when I swipe left to right it navigates to the previous page.  This is breaking my single page app.  What is the correct way to handle this navigation when using kendo mobile and ios7 safari? 

Are there any guidelines or workarounds?

[Petyo]

Hello Jonathan,

The behavior you describe is by design and in fact, recommended to be supported in Apple design guidelines. No workaround is available, currently. A thing which Kendo UI does is to avoid applying the transitions when such swipe occurs, in order to avoid duplicating them in addition to the native ones.

Regards,
Petyo
Telerik

[JonathanElsner]

Doesn't this break single pages apps though?  If I swipe after a few links deep into an app, it doesn't go back to the page before the app was loaded, it goes to a partial view that was loaded in my app.

[Petyo]

Hello Jonathan,

indeed it does, to a large extend. In fact, this is quite common complaint amongst the mobile web development community in general, along with the address bar behavior changes. 

Regards,
Petyo
Telerik

[JonathanElsner]

So what does this mean for kendo mobile?  This really effects its use as it is designed as being a single-page app.

[JohnVS]

Since this is a "quite common complaint", how does Kendo suggest us fixing our mobile apps, now that they are broken? Ours is having the same problem as JonathanElsner reported. Thanks.

[Petyo]

Hi Jonathan,

I think that there is some sort of misunderstanding on my side here. While being a single page application, Kendo UI Mobile still pushes the view id to the URL, which ensures that the back button (and the swipe gesture) navigate to the previous view as expected. Given that, I tested our demos on iOS 7 – swiping back/forth correctly navigates between views. Am I missing something? 

Regards,
Petyo
Telerik

[JonathanElsner]

Here is some urls to test app I have up.

https://applications2.regencycenters.com/webcliptest
This is using local views only.  If you go between pages and then swipe back, the navigation does work but sometimes it takes a pretty long time to display the view.

https://applications2.regencycenters.com/webcliptest/home/remote
This is using remote views.  If you click Pag2 then Page3, and then swipe back it will stay on page 3 and then go to page 1 next time.

Basically local views seem to work with this basic senario but are very slow and remote views are very flaky, they work sometimes but mostly don't.

Can you see if if I am doing something wrong?

Indec.cshtml is for the local view sample, the other files are for the remote sample.

Thank you and I am looking forward to your input.

[Alexander Valchev]

Hello JonathanElsner,

I tested both examples on iPhone 4S with iOS7 but did not manage to observe long delay between Views. Could you please check the videos and let me know what I am missing?

local views:

• http://youtu.be/KFmk9OqGsoc

remote views:

• http://youtu.be/5w5oyFN8gjM

Regards,
Alexander Valchev
Telerik

[JonathanElsner]

I watched the videos and that behavior looks good.  I figured out one area that is causing a problem.  I had on private browsing, when I turned that off, the app was behaving correct for the local views example.  Still for remote views, it was having problems though. If I open app, click page2, then click page 3, then swipe back,
the app stays on page 3 although the url shows page2.

Can you try with private browsing on and see what results you get?

[Alexander Valchev]

Hi JonathanElsner,

Thank you for the clarification.
I managed to reproduce the problem with private browsing. The problem seems to be caused by the pushState config option of the application, but we will need more time to investigate it in details.
I will forward the issue to the team and will write you back as soon as I have more information on the case.

Regards,
Alexander Valchev
Telerik

[JonathanElsner]

Great and thanks.  I appreciate your help and look forward to hearing back from you.

[Alexander Valchev]

Hi Jonathan,

We were not able to find out how to debug the issue - Chrome Dev Tools profiler does not show where the delay comes from. We will log the issue as a bug and will re-investigate it as soon as we find a way/tool to debug it. I am afraid that I cannot commit an exact time frame when that will happen.
Please accept my apology for the inconvenience caused.

Meanwhile I can suggest not using the private browsing mode, or if it is required for your users please disable the pushState option of the application.

On a side note, the incorrect view switching (example with remote views) happends because the root of the application is not configured. Usually it is build automatically by the MVC wrappers, but in your case you initialize the application with JavaScript so the root should be configured manually.

var app = new kendo.mobile.Application($(document.body), {
    pushState: true,
    root: "/example/home/"
});

Regards,
Alexander Valchev
Telerik