Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Touch events passing through fixed toolbar #3912

Closed
jeafgilbert opened this Issue · 26 comments
@jeafgilbert
<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

@jeafgilbert

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

@toddparker

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

@jeafgilbert

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

@toddparker

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

@toddparker

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

@jaspermdegroot
Collaborator

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.

@jaspermdegroot
Collaborator

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

@jaspermdegroot
Collaborator

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.

@toddparker

@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

@jaspermdegroot
Collaborator

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

@jaspermdegroot
Collaborator

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

@Wilto Wilto was assigned
@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/

@jaspermdegroot
Collaborator

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.
@jaspermdegroot
Collaborator

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;.

@arschmitz
Owner

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.

@toddparker

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.

@toddparker toddparker closed this
@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.

@stonyau

taylorcode's code works.

This bug is silly. For example you have a button on your transparent navigation bar, below code can perfectly solve the problem.

$('#btn_open_menu').on('touchstart', function () {
openMenu();
return false;
});

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.