swipe issue in ios 7 in Kendo UI for jQuery Application

JonathanElsner

20 posts

Member since:
Feb 2004

Posted 25 Sep 2013 Link to this post

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

Admin

2444 posts

Posted 26 Sep 2013 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

JonathanElsner

20 posts

Member since:
Feb 2004

Posted 26 Sep 2013 Link to this post

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

Admin

2444 posts

Posted 27 Sep 2013 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

JonathanElsner

20 posts

Member since:
Feb 2004

Posted 27 Sep 2013 Link to this post

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

JohnVS

90 posts

Member since:
Apr 2013

Posted 27 Sep 2013 Link to this post

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

Admin

2444 posts

Posted 28 Sep 2013 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

JonathanElsner

20 posts

Member since:
Feb 2004

Posted 30 Sep 2013 Link to this post

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.

files.zip

Alexander Valchev

Admin

2895 posts

Posted 02 Oct 2013 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

JonathanElsner

20 posts

Member since:
Feb 2004

Posted 02 Oct 2013 Link to this post

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

Admin

2895 posts

Posted 04 Oct 2013 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

JonathanElsner

20 posts

Member since:
Feb 2004

Posted 04 Oct 2013 Link to this post

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

Alexander Valchev

Admin

2895 posts

Posted 07 Oct 2013 Link to this post

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

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!