Touch events passing through a fixed header #4480

Closed
adriancd opened this Issue May 31, 2012 · 6 comments

Projects

None yet

2 participants

@adriancd

On a page with a fixed header and a list, if i scroll the list and then touch the header the list item button which is now behind the header is triggered. It is slightly inconsistent, mostly the touch passes through the header, sometimes it doesn't and I am being very careful to only touch the header when testing

A button in the fixed header will block the touch event passing through to the list button

Happens on latest iOS in iPhone 4.5 with 1.1.0

this never happens with a mouse click in a desktop browser

thanks

@jaspermdegroot
jQuery Foundation member

hi @adriancd

Can you provide a simple test page that reproduce the issue? Here is a template that you can use http://jsbin.com/otepum/edit#html
Thanks!

Note: This sounds the same as Android issues #4204 and #4032.

@adriancd

Hi

The example on http://jsbin.com/otepum/43/edit repeats the same bug

If you scroll the list then touch the header and the button behind will be triggered. Mouse clicks do not pass through the fixed header

thanks

@jaspermdegroot
jQuery Foundation member

Thanks for the test page. I added a missing closing tag, new version: http://jsbin.com/otepum/45/

@adriancd

I added a lot of heading padding to that to make it easier to test. Seems like the top of the header is where the touch passes through but not the lower part

http://jsbin.com/otepum/49

@adriancd

I also see that scroll touch events are passing through the header on to a list which has been scrolled behind it. This is a major bug. A user touching the header will get unexpected results if they miss a navigation button in the header. Are there any ideas about a fix?

Touch events also pass through a header when using the latest 1.2.0 pre

I have worked around the main touch issue by doing a scroll position check on the clicked list item. If it is less than the y position then the touch/click is ignored

@jaspermdegroot
jQuery Foundation member

Closing this issue as duplicate of #3912. Although that one is reported for an Android device, the issue seems the same. Better to concentrate all information and test reports in one thread. I will post a link to a new test page there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment