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

Multiple taps required on iOS

5 Answers 79 Views
Drawer (Mobile)
This is a migrated thread and some comments may be shown as answers.
jmillar
Top achievements
Rank 1
jmillar asked on 06 Feb 2015, 03:05 PM
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

5 Answers, 1 is accepted

Sort by
0
jmillar
Top achievements
Rank 1
answered on 06 Feb 2015, 06:31 PM
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>
0
Kiril Nikolov
Telerik team
answered on 10 Feb 2015, 01:37 PM

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!
 
0
jmillar
Top achievements
Rank 1
answered on 10 Feb 2015, 08:06 PM
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
0
jmillar
Top achievements
Rank 1
answered on 10 Feb 2015, 08:25 PM
Hi Kiril;

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

Thanks,
Jason
0
Alexander Valchev
Telerik team
answered on 11 Feb 2015, 02:07 PM
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!
 
Tags
Drawer (Mobile)
Asked by
jmillar
Top achievements
Rank 1
Answers by
jmillar
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Alexander Valchev
Telerik team
Share this question
or