Collapsible heading vclick issue #2212

Closed
marcing opened this Issue Aug 4, 2011 · 12 comments

Projects

None yet

4 participants

@marcing
marcing commented Aug 4, 2011

This bug concerns b1 and b2:

Line 3482-3483:
collapsibleHeading
.bind( "vclick", function( event ) {

should be changed to:
collapsibleHeading
.bind( "click", function( event ) {

vclick => click

This change fixes a bug a on Android 2.2 where collapsing or expanding cause the page the scroll down/up and the click is invoked on another element.
For example:

  1. We click on collapse heading.
  2. Collapsible content collapses, website is shorter now.
  3. Website scrolls up, because content is shorter.
  4. An element which is now in this position (after scroll) is clicked (not the collapissible heading).

Thank you,
Marcin Gil
Marcin

@toddparker
Contributor

Is this with the collapsible plugin or the docs JS?

@johnbender johnbender was assigned Aug 7, 2011
@marcing
marcing commented Aug 8, 2011

It happens with following scenario:

<buttons that get clicked on collapse>
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<h3>...</h3>
<form ...>
</form>
</div>
<buttons that get clicked when we scroll to the collapsible header>

Scrolling is done with this piece of code:
$("div[data-role='collapsible']").live('expand', function()
{
var top = $(this).position().top;
$.mobile.silentScroll(top);
});

@marcing
marcing commented Aug 8, 2011

It does not happen on desktops, just on native android browser.

@marcing
marcing commented Aug 11, 2011

I've prepared an example:
http://dl.dropbox.com/u/11435743/jqm-2122/index.html
or shortened:
http://goo.gl/TfeLO

Issue exists only on Android+Webkit browser. Mobile firefox is fine.

@marcing
marcing commented Sep 23, 2011

This issue is valid also for beta3.

@toddparker
Contributor

@marcing - I just tested the collapsibles here on a=our HTC Incredible (2.2) and wasn't able to reproduce the problem:
http://jquerymobile.com/test/docs/content/content-collapsible.html

Can you provide details on how to reproduce?

@marcing
marcing commented Sep 24, 2011

Try clicking Collapsible, other buttons should be clicked by themselves (side effect). Try my example, not the offical demo:
http://dl.dropbox.com/u/11435743/jqm-2122/index.html

@toddparker
Contributor

@marcing - I was able to reproduce this occasionally in my Android 2.2 phone. The issue is that we use vclick events which covers both mouse and touch events for faster performance. I think your scrolling code is moving the elements on the page so quickly that there is a mismatch between the target of the click and touch events. If you are going to scroll the page, I'd suggest waiting a bit before starting the scroll or switching the events to just use click, like your originally suggested. The issue is that there is a noticeable delay/lag if just using click so there is a tradeoff.

@marcing
marcing commented Sep 27, 2011

Dear Todd,

There is no scrolling code in case of collapse event, the unwanted click occurs also when you close the collapsible content. This is clearly a bug, where one action causes another unwanted action without any third party code.

On a website we are developing this behaviour is extremely annoying to users and we have to edit jquery mobile source directly, because there is no workaround for this.
I am very confident you need to change this one.

Thanks,
Marcin

@marcing
marcing commented Sep 27, 2011

When considering the expand issue with third party scrolling you must admin that this scenario will be very common, since it is not desirable that the user expands an area which he cannot see after expansion. I was trying to solve the issue with timeout, but it started to work after 0.5s delay and it was not successful in 100% cases. This kind of delay it confusing for the user. It seems that the jump is not related to his click after such a long delay.

@jblas
Contributor
jblas commented Sep 28, 2011

@toddparker

I agree with @marcing, this falls into that bucket of when not to use vclick ... which is anytime an action can cause the content underneath what is being clicked to change.

The only reliable way to avoid this problem is to wait for the click. Disappointing, I know.

@marcing
marcing commented Sep 29, 2011

Thank you!

@jblas jblas added a commit that closed this issue Sep 29, 2011
@jblas jblas Fixes #2212 - Collapsible heading vclick issue
- Switch to using "click" instead of "vclick" on collapsible headers since that is the only reliable way to prevent uncaught/mismatched clicks from firing on a different element.
bb83268
@jblas jblas closed this in bb83268 Sep 29, 2011
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment