Skip to content
This repository

Touch events passing through fixed toolbar #3912

Closed
JeaffreyGilbert opened this Issue March 25, 2012 · 25 comments

11 participants

Jeaffrey Gilbert Jasper de Groot Mat Marquis Todd Parker ytzhakov jschulte Alexander Schmitz tchedd racorbit jawinn taylorcode
Jeaffrey Gilbert
<div id="page" data-role="page" data-fullscreen="true">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <a href="#" data-icon="back" onClick="history.go(-1)">Back</a>
        <h1>Test Page</h1>
        <a href="#" data-icon="" onClick="#">Next</a>
    </div>
    <div data-role="content">
        <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
            <option>Option 4</option>
        </select>
    </div>
</div>

With data-icon="back", first time I tapped on the dropdown, the browser shows the URL address bar. Second time I tapped on the dropdown, the options appear with the Android dropdown select widget.

With empty value (data-icon=""), first time I tapped on the dropdown, the options appear with the Android dropdown select widget.

Tested with : Android 2.3

Jeaffrey Gilbert

Btw, I don't know why some of my source code above rendered as HTML elements, not included in grey box.

Todd Parker

Can you create a test page using the latest build? Template: http://jsbin.com/eseley/edit

Jeaffrey Gilbert

I'm using jQuery Mobile RC 1.1.0 and I don't see it in jsbin.

Todd Parker

You don't see the error when using the latest in jsbin? If so, we can close as fixed.

Todd Parker

@JeaffreyGilbert - That link was a template with latest included. Anyway, does this illustrate the issue:
http://jsbin.com/eseley/9

Jasper de Groot
Owner

I adjusted the test page a little bit (http://jsbin.com/enuyud/4/) so the select menu button is half covered by the header.

Issues I noticed while testing on Android 2.3.3 were:

  • When I tap on the header, the select menu is opened (seems to be a duplicate of #4480)
  • When I tap on the select menu button right below the back button, the back button is triggered

I also tested with back button without an icon and didn't see any difference. Maybe it is more a matter of the button being smaller so the area where issue 2 occurs becomes smaller as well.

Jasper de Groot
Owner

Update: changed the topic of this issue because it is most likely not related to "data-icon" (previous title of the issue).

Jasper de Groot
Owner

Issues #4914 and #4204 are closed as duplicates, not as fixed.

ytzhakov

Confirmed on Samsung Galaxy S 2, Android 2.3.3.

This issue is kind of a blocker. I cannot release a website while this bug is still there.

Todd Parker

@ytzhakov - I just tested @uGoMobi's test page on our Nexus running 2.3.6 and the page seems to work ok. I can tap the left edge of the select and it opens, and it can tap the back button and it works. This could be a bug in 2.3.3 that Google fixed or differences in hardware, especially digitizers and error correction in the OS. Not sure, but Android is super buggy with fixed.

ytzhakov

Well, it never happened in 1.1.x and 1.x

Jasper de Groot
Owner

Issue #2506 has been closed as duplicate. It was about the same issue, but on an Android 2.1 device.

Jasper de Groot
Owner

Issue #4480 has been closed as duplicate. Note that this issue was noticed on iOS.

jschulte

I'm currently looking into this issue to see if I can find a solution.

jschulte

The issue seems to only happen after the select is first activated. You can't bring it up by clicking on the header initially. If you click just below the header to activate the select and then close, you can then click on the header to bring up the select again. Could be a z-index issue.

jschulte

It seems to be deeper than a z-index issue. Another interesting point is that setting "user-scalable=no" in the "viewport" meta tag causes the issue to occur 100% of the time. Without "user-scalable=no" set, you have to click on the select behind the header (just below the header) to 'activate' the problem, which then happens every time after you 'activate' it.

Some more potentially useful information: http://bradfrostweb.com/blog/mobile/fixed-position/

Jasper de Groot
Owner

I did some more testing on Browserstack Motorola Atrix 2 / Android 2.3

Here is my test page: http://goo.gl/tHxhj

Conclusions:

  • It only applies to a native select menu button. The problem did not occur with a button for a custom select menu or any other button like the links and the checkbox.
  • The issue is not related to data-fullscreen="true", it also happens with just position fixed for the toolbars.
  • I didn't have to activate the select first or change the user-scalable setting to see the problem. Scroll the native select menu button underneath the fixed header, tap on the header, and the issue is always there.
Jasper de Groot
Owner

The problem also happens when a native select is underneath a popup (#5280). So it's not only with position: fixed; but also with position: absolute;.

Alexander Schmitz
Collaborator

I did some more research on this using @uGoMobi test pages on HTC Thunderbolt on 2.3 and what i saw looks like an issue with touch heuristics i could only cause the issue when the element was partially under the toolbar. I could replicate with any type of form element. This leads me to the impression that its trying to correct the click target in the browser. @toddparker has run into this on other HTC phones as well. I think this is out of our control.

Todd Parker

Based on our testing, we're going to close this issue because it seems to be behavior that is outside of our control as @arschmitz outlined. If anyone discovers potential workarounds we could review, please submit a PR.

Todd Parker toddparker closed this November 16, 2012
tchedd

I have spent hours looking for a fix. Following is what fixed my issue, at least on android 2.x
I added "user-scalable=no;" to the viewport meta.
This solved all issues with clicking on items in fixed divs.

racorbit

FastClick, which is a js library used to bypass the 300 ms delay found on clicks in most mobile browsers, had a wonderful side-efect:) It resolved this behaviour and my clicks stop going through my pop us menu's onto input's or a tags behind the pop up.

https://github.com/ftlabs/fastclick

jawinn

Fastclick did not fix the issue here.

Form selects are still opening that are behind a fixed footer navbar, when the navbar is clicked. Form selects are also opening that are behind the popup screen. User-scalable=no does not fix. Using JQM 1.4 and Android 4.0.4 (HTC Rezound). Cannot find any workaround...been on every stackoverflow post and github issue I could find.

taylorcode

The solution is to simply attach a touch event to any non-fixed element that will pick up the touch event as it bubbles up from the fixed element.

For example, attaching an event to the window:

$(window).on('touchstart', function () {});

All touch events will propagate to the window, even from fixed position elements. This is clearly a bug fix, but it works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.