This is a migrated thread and some comments may be shown as answers.

quick navigation issue with slide transition

7 Answers 186 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
Dean
Top achievements
Rank 1
Dean asked on 28 Jul 2014, 02:09 AM
The issue I have is with the tabstrip in a footer on ios devices with view transition slide. When you try to navigate quickly through the views the tabs can get 'stuck'. It seems to me that the mouse-up event doesn't fire because the tab you touch stays highlighted. Then when you try clicking it again it fires the click event twice consecutively. This behavior does not seem to occur on android devices.

I've created an example jsbin to help with replicating the issue, just be aware that it takes a few goes of flicking between the 2 views quickly to cause the issue - you have to touch the tabstrip at precisely the right time as soon as a view shows. And make sure you run it on an ios device; I've been testing with an iPad mini.

The attached screenshots show what happens when the issue occurs.

Regards
Dean

7 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 29 Jul 2014, 12:46 PM
Hi Dean,

The example you have created does not use a tabstrip widgets but mobile buttons wrapped in a div with the CSS classes the tabstrip uses. I would like to suggest that you take a look at the following tabstrip demo for the correct mobile tabstrip markup. 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Dean
Top achievements
Rank 1
answered on 29 Jul 2014, 10:16 PM
Sorry my mistake. Let me rewrite my post for you with the correct terminology:

The issue I have is with buttons in a footer on ios devices that trigger navigation with view transition slide. When you try to navigate quickly through the views the buttons can get 'stuck'. It seems to me that the mouse-up event doesn't fire because the button you touch stays highlighted. Then when you try clicking it again it fires the click event twice consecutively. This behavior does not seem to occur on android devices.

I've created an example jsbin to help with replicating the issue, just be aware that it takes a few goes of flicking between the 2 views quickly to cause the issue - you have to touch the buttons at precisely the right time as soon as a view shows. And make sure you run it on an ios device; I've been testing with an iPad mini.

The attached screenshots show what happens when the issue occurs.

Regards
Dean

0
Dean
Top achievements
Rank 1
answered on 29 Jul 2014, 10:22 PM

Oh and feel free to move this thread to the Button (Mobile) section of the forum.

0
Petyo
Telerik team
answered on 31 Jul 2014, 12:36 PM
Hello Dean,

The problem you have encountered is due to the specifics of the transition - in order to avoid propagating accidental touches, the mobile app does not accept touches during the transition. However, if you press the button during the transition but release it afterwards, it results in a somewhat unexpected touch sequence - as `touchend` event is triggered without a corresponding `touchstart`. 

Using the tabstrip widget in that case would be more reliable, as the widget works with the touchstart event. I modified your example to use the tabstrip widget, and it works as expected - please let me know if this would fit your project requirements.

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Dean
Top achievements
Rank 1
answered on 11 Aug 2014, 11:06 PM
Thanks Petyo,

Unfortunately the tabstrip doesn't fit my requirements, it's close (hence using the tabstrip css with buttons), but I need it to behave such that when a button is pressed it highlights then reverts back it's original color when it's released (the behavior of a normal button). This is because each view has a different set of buttons in the footer; views don't share an application-wide menu where a tab is always active.

My particular requirements aside, surely this problem with buttons should be fixed. Perhaps a button can ignore the 'touchend' event when it doesn't first register a 'touchstart' event.

Regards
Dean
0
Petyo
Telerik team
answered on 14 Aug 2014, 07:44 AM
Hello Dean,

I am sorry for the late reply. We are going to investigate the button behavior, but so far I am not certain that we will be able to resolve it in a reliable manner. In order to assist you with your concrete case, I modified my example further, by moving the TabStrip to each view, and deselecting the initial tab. The only thing which does not match your requirements is the brief highlight, since the Tabstrip performs the navigation immediately on touchstart. 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Dean
Top achievements
Rank 1
answered on 14 Aug 2014, 09:53 PM
Thanks for your help Petyo, it's much appreciated.
Tags
TabStrip (Mobile)
Asked by
Dean
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Dean
Top achievements
Rank 1
Share this question
or