Multiple taps required on iOS

6 posts, 0 answers
  1. jmillar
    jmillar avatar
    33 posts
    Member since:
    Oct 2006

    Posted 06 Feb 2015 Link to this post

    Has anybody experienced an issue where the drawer button is "touchier" on iOS.  We've been testing on several Android and iOS devices.  On Android, the drawer appears with every tap of the button....with iOS, we frequently seem to have to tap multiple times for the drawer to appear.  New to the platform - anybody have any suggestions with how to troubleshoot?

    Thanks,
    Jason
  2. jmillar
    jmillar avatar
    33 posts
    Member since:
    Oct 2006

    Posted 06 Feb 2015 in reply to jmillar Link to this post

    For example, I put together the following sample and attached screenshots that illustrate what I'm seeing.  For some reason, there are more occasions on iOS than Android where the touch events register on the drawer icon but no drawer appears....

    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
     
    </head>
    <body>
    <div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox" data-zoom="true">
        <div id="log">
             
        </div>
    </div>
     
     
     
    <div data-role="drawer" id="my-drawer" style="width: 270px" data-show="drawerShow" data-views="['drawer-home']" data-swipe-to-open="false">
        <ul data-role="listview" data-type="group">
            <li>Mailbox
                <ul>
                    <li data-icon="inbox"><a href="#drawer-home" data-transition="none">Inbox</a></li>
                    <li data-icon="star"><a href="#drawer-starred" data-transition="none">Starred Items</a></li>
                    <li data-icon="compose"><a href="#drawer-drafts" data-transition="none">Drafts</a></li>
                    <li data-icon="sent"><a href="#drawer-sent" data-transition="none">Sent Items</a></li>
                    <li data-icon="trash"><a href="#drawer-deleted" data-transition="none">Deleted Items</a></li>
                    <li data-icon="spam"><a href="#drawer-spam" data-transition="none">Spam</a></li>
                </ul>
            </li>
            <li>Tasks
                <ul>
                    <li>To Do</li>
                    <li>In Progress</li>
                    <li>Done</li>
                    <li>High Priority</li>
                    <li>Low Priority</li>
                </ul>
            </li>
            <li>Account
                <ul>
                    <li data-icon="settings">Settings</li>
                    <li data-icon="off">Log Out</li>
                </ul>
            </li>
        </ul>
    </div>
     
    <div data-role="layout" data-id="drawer-layout">
        <header data-role="header">
            <div data-role="navbar">
                <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left" id="launchDrawer" data-click="drawerButtonClick" ></a>
                <span data-role="view-title"></span> <span id="counter">0</span>
                <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
            </div>
        </header>
    </div>
     
    <script>
        // reset global drawer instance, for demo purposes
        kendo.mobile.ui.Drawer.current = null;
    </script>
     
    <style>
        .km-ios #my-drawer .km-content, .km-android #my-drawer .km-content, .km-blackberry #my-drawer .km-content,
        .km-ios #my-drawer .km-list > li, .km-android #my-drawer .km-list > li, .km-blackberry #my-drawer .km-list > li,
        .km-ios #my-drawer .km-listview-link > .km-icon, .km-android #my-drawer .km-listview-link > .km-icon, .km-blackberry #my-drawer .km-listview-link > .km-icon,
        .km-ios #my-drawer .km-list li > .km-icon, .km-android #my-drawer .km-list li > .km-icon, .km-blackberry #my-drawer .km-list li > .km-icon
        {
            background-color: #4e4e4e;
            color: #fff;
        }
     
        .km-ios #my-drawer .km-group-title,
        .km-blackberry #my-drawer .km-group-title
        {
            background-color: #6e6e6e;
            color: #fff;
        }
     
        .km-drawer-button:before, .km-drawer-button:after  { content: "\E077"; }
        .km-inbox:before, .km-inbox:after { content: "\E0B0"; }
        .km-sent:before, .km-sent:after { content: "\E0C6"; }
        .km-trash:before, .km-trash:after { content: "\E0C3"; }
        .km-spam:before, .km-spam:after { content: "\E0C5"; }
        .km-star:before, .km-star:after { content: "\E0D7"; }
        .km-settings:before, .km-settings:after { content: "\E0DA"; }
        .km-off:before, .km-off:after { content: "\E0B9"; }
     
        .inboxList
        {
            font-size: .8em;
        }
     
        .inboxList p,
        .inboxList h2,
        .inboxList h3
        {
            margin: 5px 2px;
        }
     
        .inboxList p,
        .inboxList h3
        {
            color: #777;
        }
     
        .inboxList h3.time
        {
            color: #369;
            float: left;
            margin-right: 10px;
        }
     
        #drawer-spam .spam
        {
            color: darkred;
            background: currentcolor;
            display: block;
            margin: 2em;
            font-size: 1.4em;
        }
     
        #drawer-spam .spam .km-text
        {
            color: white;
        }
    </style>
     
     
    <script>
        var app = new kendo.mobile.Application(document.body);
         
        $(function() {
            //alert($("#launchDrawer span:first-child").attr('class'));
            //$(".km-drawer-button").click(function() {log("button icon click")});
            $(".km-drawer-button").bind('touchstart', function() {log("button icon touchstart")});
            $("#launchDrawer").bind('touchstart', function() {log("drawer span touchstart")});
        })
         
        function drawerButtonClick() {
            //log("Drawer button click");
        }
        function drawerShow() {
            log("Drawer show");
        }
        function increment() {
            $("#counter").html(parseInt($("#counter").html())+1);
        }
         
        function log(message) {
            console.log(message);
            $("#log").append(message + "<BR/>");
        }
    </script>
    </body>
    </html>
  3. Kendo UI is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 10 Feb 2015 Link to this post

    Hello Jason,

    The behavior that you describe is a result of a fairly complex browser behavior and implementations. Here are some of the problems and possible solutions:

    1. Buttons positioned at the far left are likely to suffer from the fact that native back/forth gestures are reserved by the browser. Therefore the touchend event is not consistently fired when the button is positioned in the left/right edges of the screen.

    2. You might ask - why not fire the button tap event on touchstart? The problem with this implementation is that it will make the buttons non-scrollable, and cause some more undesired behavior. We will consider adding configuration option allowing the user to fire the tap event on touchstart, whenever this is possible depending on the implementation.

    3. Another issue is tap while moving, in this situation setting the default threshold of the UserEvents, will help on make the button more responsive, when tapped on the move.

    4. From UX standpoint - most people are inclined to click on the icon in order to open the Drawer, my observations are that removing the icon and placing a text instead will make people tap the text on the area that is closer to the center of the screen, therefore minimize the unnecessary second taps.

    I have prepared an example that shows, some of the workarounds in action, please test it out and let me know if it helps.

     

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. jmillar
    jmillar avatar
    33 posts
    Member since:
    Oct 2006

    Posted 10 Feb 2015 in reply to Kiril Nikolov Link to this post

    Hi Kiril;

    Thanks for your response.  I did try using text instead....it doesn't seem to have made a difference.  I still frequently require multiple taps to open the drawer.  Just to clarify - what is the event that causes the drawer to show?  Touchend?

    Thanks,
    Jason
  6. jmillar
    jmillar avatar
    33 posts
    Member since:
    Oct 2006

    Posted 10 Feb 2015 in reply to jmillar Link to this post

    Hi Kiril;

    Just to clarify, I've attached an updated sample and a screenshot of the behaviour I'm seeing.

    Thanks,
    Jason
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 11 Feb 2015 Link to this post

    Hello Jason,

    I examined your project and agree that the button is still not one hundred percent responsive although that it works better than before (especially if you increase the threshold).
    At present we cannot offer a better solution. We will log this issue for further investigation and will let you know if we find another way to improve the responsiveness.
    You may follow the issue status on GitHub: https://github.com/telerik/kendo-ui-core/issues/543

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready