Touch events passing through fixed toolbar #3912

Closed
jeafgilbert opened this Issue Mar 25, 2012 · 26 comments

Comments

Projects
None yet
@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

This comment has been minimized.

Show comment
Hide comment
@jeafgilbert

jeafgilbert Mar 25, 2012

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

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Mar 26, 2012

Contributor

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

Contributor

toddparker commented Mar 26, 2012

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

@jeafgilbert

This comment has been minimized.

Show comment
Hide comment
@jeafgilbert

jeafgilbert Mar 26, 2012

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

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Mar 26, 2012

Contributor

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

Contributor

toddparker commented Mar 26, 2012

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 24, 2012

Contributor

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

Contributor

toddparker commented May 24, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 18, 2012

Member

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.

Member

jaspermdegroot commented Jun 18, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 3, 2012

Member

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

Member

jaspermdegroot commented Sep 3, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 3, 2012

Member

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

Member

jaspermdegroot commented Sep 3, 2012

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

@ytzhakov

This comment has been minimized.

Show comment
Hide comment
@ytzhakov

ytzhakov Sep 3, 2012

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.

ytzhakov commented Sep 3, 2012

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Sep 4, 2012

Contributor

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

Contributor

toddparker commented Sep 4, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@ytzhakov

ytzhakov Sep 4, 2012

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

ytzhakov commented Sep 4, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 4, 2012

Member

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

Member

jaspermdegroot commented Sep 4, 2012

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

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 4, 2012

Member

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

Member

jaspermdegroot commented Sep 4, 2012

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

@ghost ghost assigned jaspermdegroot and Wilto Sep 4, 2012

@jschulte

This comment has been minimized.

Show comment
Hide comment
@jschulte

jschulte Oct 15, 2012

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

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

@jschulte

This comment has been minimized.

Show comment
Hide comment
@jschulte

jschulte Oct 15, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@jschulte

jschulte Oct 15, 2012

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/

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/

@ghost ghost assigned jaspermdegroot Nov 11, 2012

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Nov 11, 2012

Member

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

jaspermdegroot commented Nov 11, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Nov 13, 2012

Member

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

Member

jaspermdegroot commented Nov 13, 2012

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

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Nov 16, 2012

Member

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.

Member

arschmitz commented Nov 16, 2012

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Nov 16, 2012

Contributor

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.

Contributor

toddparker commented Nov 16, 2012

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.

@tchedd

This comment has been minimized.

Show comment
Hide comment
@tchedd

tchedd Mar 13, 2013

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.

tchedd commented Mar 13, 2013

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

This comment has been minimized.

Show comment
Hide comment
@racorbit

racorbit Aug 2, 2013

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

racorbit commented Aug 2, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jawinn

jawinn Feb 8, 2014

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.

jawinn commented Feb 8, 2014

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

This comment has been minimized.

Show comment
Hide comment
@taylorcode

taylorcode Mar 6, 2014

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.

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

This comment has been minimized.

Show comment
Hide comment
@stonyau

stonyau Jun 13, 2014

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;
});

stonyau commented Jun 13, 2014

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