quick navigation issue with slide transition

8 posts, 0 answers
  1. Dean
    Dean avatar
    73 posts
    Member since:
    Oct 2012

    Posted 27 Jul 2014 Link to this post

    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
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 29 Jul 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Dean
    Dean avatar
    73 posts
    Member since:
    Oct 2012

    Posted 29 Jul 2014 in reply to Petyo Link to this post

    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

  5. Dean
    Dean avatar
    73 posts
    Member since:
    Oct 2012

    Posted 29 Jul 2014 in reply to Dean Link to this post

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

  6. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 31 Jul 2014 Link to this post

    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!
     
  7. Dean
    Dean avatar
    73 posts
    Member since:
    Oct 2012

    Posted 11 Aug 2014 Link to this post

    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
  8. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 14 Aug 2014 Link to this post

    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!
     
  9. Dean
    Dean avatar
    73 posts
    Member since:
    Oct 2012

    Posted 14 Aug 2014 in reply to Petyo Link to this post

    Thanks for your help Petyo, it's much appreciated.
Back to Top
Kendo UI is VS 2017 Ready