Android - listitem link misfire when listitem below contains long string of text

[antonsw]

This is a ridiculous problem that I have found on an HTC Desire Android 2.2, and Samsung Galaxy S 2.1.
Update to this - I have upgraded the Galaxy S to gingerbread and tried RC3 with the same effect.

Not a problem with Iphone and Ipad iOS5. (not tested on iOS4.x)

If you have a bunch of

listitems such as:

1. Home Page
2. Sub Page
3. Click this awesom and cool page

You can click li 1 with out any problems and will always navigate correctly.

If you click li 2 (in the region where the text does not appear and towards bottom of the list item), li 3 will fire.

I have deduced that if you have a listitem which is longer than a certain length (b), then touching the preceding listitem (a) will fire listitem b.

Copy and paste into html file and see for your self:

To reproduce browse to the file from your Android phone in portrait mode and click item 1 or item 5

and the javascript for the item beneath it will fire. You can also faintly see the list item below it

becoming selected. (lost the pretty colors with the javascript alert hack but easier one file proof)...

Copy of this post with reproduction example: http://forum.jquery.com/topic/android-li-1-fires-the-li-2-underneath-it-when-the-text-of-2-is-long

[toddparker]

Could you please create a minimal test page using this template and instructions:
http://jsbin.com/utalaw/edit

[antonsw]

Hi Todd,

Here is the code example as per the template:
This is only reproducible on the android phone itself. The android emulator does not have this issue
nor does iPhone.

<title>jQuery Mobile test page</title> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> <style type="text/css"> </style>

Tap item 1 or item 5 and if you tap in the bottom area of the listitem the alert generated will
be from the next list item

<li><a href="#" onclick="alert('1')">1 Click Me</a></li>
<li><a href="#" onclick="alert('2')" >2 Tap 1 and I will be it cos im long!</a></li>
<li><a href="#" onclick="alert('3')">3 Supported platforms</a></li>
 <li><a href="#" onclick="alert('4')">4 Shortie 1</a></li>
  <li><a href="#" onclick="alert('5')">5 Shortie 2</a></li>
  <li><a href="#" onclick="alert('6')">6 Tap 5 and I will be clicked!</a></li>

-----Original Message-----
From: Todd Parker [mailto:reply@reply.github.com]
Sent: Wednesday, November 16, 2011 7:31 PM
To: antonsw
Subject: Re: [jquery-mobile] Android - listitem link misfire when listitem below contains long string of text (#3073)

Could you please create a minimal test page using this template and instructions:
http://jsbin.com/utalaw/edit

---

Reply to this email directly or view it on GitHub:
#3073 (comment)

[toddparker]

This test page with the code above works fin on our 2.2 and 2.3 devices. If I click the second li, I get the proper alert.

http://jsbin.com/obunov
http://jsbin.com/obunov/edit

[antonsw]

Hi Todd,

You need to click li 1 or li 5. (a listitem which precedes one which contains a long piece of text).
The phone needs to be portrait mode. If it is in landscape the text in the offending li's of this example is not long enough.

I have just checked on an HTC Desire 2.2 at the location you specified below and the behavior is that if i tap '1 Click Me' near the bottom of the item where there is no text or on the chevron I receive the alert '2'. Same for clicking '5 Shortie 2' which will alert '6'

Seriously it is 100% reproducable everytime as well as on my Samsung Galaxy S with gingerbread. It makes jq mobile incredibly frustrating to use on Android.

Tx

On Nov 21, 2011, at 20:32, Todd Parker reply@reply.github.com wrote:

This test page with the code above works fin on our 2.2 and 2.3 devices. If I click the second li, I get the proper alert.

http://jsbin.com/obunov
http://jsbin.com/obunov/edit

---

Reply to this email directly or view it on GitHub:
#3073 (comment)

[antonsw]

This problem also happens on the jquery docs on the following item:

API - Methods & Utilities.

tap this item as mentioned before and you will be taken to Data attribute reference.

If you are unable to reproduce I will post a video.

[antonsw]

just tested on samsung nexus s - 2.3.6

problem exists in android browser. user tested in opera and no prob.

[toddparker]

Funny, I just tested those links on both 1.0 and latest in 2.2 and 2.3 and can't reproduce I'm not saying you're not having an issue, I'm just saying that this may be a difference between our devices.

[toddparker]

Can you try re-starting just to be sure?

[antonsw]

Here is demo video showing the problem on current jquerymobile docs page.

This is from HTC desire 2.2

http://www.youtube.com/watch?v=WJ71vxKL_XU

I dont know what the diff can be with our devices since ive now tried 3 different android versions on 2 different manufacturers...

[gseguin]

I just tried tried on both 1.0 and latest with android 2.3.7 and could not reproduce.

[gseguin]

Trying harder, I was able to reproduce on latest by tapping towards the bottom of the button.

[toddparker]

Yeah, maybe @jblas can weigh in here, but this just seems like the Android bug where the touch targets are a bit off. Not sure what we can do on our end, but maybe he has ideas.

[jblas]

Yup, I can reproduce this on my HTC Incredible Android 2.1, by touching item-5 below the half-way point of the button ... you can see that we highlight the item-5 button, but the alert for item 6 fires.

I placed some debug code in the sample above and verified that the browser's target for the touch events are indeed item-5, but the click event target is item-6.

<script>
var touchElement = null;

$( function() {
     $( "ul a" )
        .bind( "touchstart", function( e ) {
                touchElement = this;
            })
        .bind( "touchmove", function( e ) {
                if ( this != touchElement ) {
                    alert( "touchmove target differs! start: " + touchElement.id + " -- " + this.id );
                }
            })
        .bind( "touchend", function( e ) {
                if ( this != touchElement ) {
                    alert( "touchend target differs! start: " + touchElement.id + " -- " + this.id );
                }
            })
        .bind( "click", function( e ) {
                if ( this != touchElement ) {
                    alert( "click target differs! start: " + touchElement.id + " -- " + this.id );
                }
            });
});
</script>

[antonsw]

Any news on this?

thanks in advance

[TaxSlayer-Mobile]

Also having this issue. Can confirm that this occurs on Android 3.2.1 and 2.3.

[TaxSlayer-Mobile]

I thought I would mention, I changed the event from click to tap in the 1.0.1 jQM source on line 3994, and the issue seems to be resolved for 3.2.1, havent tested 2.3. If I learn more, I'll follow up what my changes.

[jaspermdegroot]

Looks like issue #4826 is similar to this one.

[jaspermdegroot]

I tested http://jsbin.com/obunov on Android 2.3.6 and clicking on the bottom half of link 5 always fires the correct alert.

@arschmitz - Can you test on a Android 2.1/2.2 device?

[jesperveldhuizen]

It seems to work OK on our HTC Wildfire test phone, running Android 2.2.1. I used the same testcase as @uGoMobi.

[jaspermdegroot]

@baansport - Thanks a lot for testing!

Closing this issue as fixed. If anyone can still reproduce the issue with latest code, please comment and we will look into it again.