Button Not Working in Android Browser

Ethan

I have found that the button on my login page does not work at all in the stock android browser. I have created a jsfiddle with the relevant section of my page, which you can try at the following link:http://jsfiddle.net/efinkel/HSEFs/2/

It seems like the button does not catch the touch/click event in that browser. However, the page works as expected with the mobile versions of Chrome and Firefox. The phone I tested this with is a Samsung Galaxy S3 running Android 4.04.

Petyo

I tried to reproduce the problem you describe on this demo page on Android 4.0.4 and Android 4.2.0, to no avail. Can you try testing it on your device, and see if it works correctly for you? It might be the custom styles that interfere with the button click area.

Ethan

Thanks for the response. I tried another phone (Droid Razr Maxx, Android 4.0.4), and it seems to be having the same problem. Again, this problem only occurs on the stock Android Browser. However, the demo page that you linked seems to work fine, so I did a little more testing on jsfiddle. Apparently, I ran into a weird corner case. The problem only occurs on that browser when the button is after a ListView and is floated left or right. Wrapping the button in a div and floating the div fixed the problem. Also, it worked fine when I placed the button (floated) before the ListView or removed the ListView entirely.

Dimo

We found the cause of the problem - it is triggered by the following CSS rule

.km-on-android.km-4{

-webkit-transition: -webkit-transform 0.0001ms;

}

Its purpose is to enable 3D acceleration in Samsung Galaxy S3 with Android 4.0. You can override it with:

.km-root .km-on-android.km-4

{

-webkit-transition: none;

}

However, please note that this will harm performance in Samsung Galaxy S3. It is possible that they have fixed the issue on their side in Android 4.1. This update is official now for this device, so you can test the workaround with it.

Alan

I am having a similar issue. My buttons will work, but only if I can tap at the very bottom. The buttons don't even show a highlight when I tap, but the events fire. If the button does highlight, then I know I tapped too high and the events do not fire.

I am using a Galaxy S3, and I have tried all of the workarounds in this post, but nothing seems to work.

Any ideas?

Dimo

I am not sure this is the same problem as the one discussed previously, but based on the provided information, I can't offer you any alternative solutions. Can you provide a jsFiddle / jsBin demo which reproduces the described behavior?

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.