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]

Hello Ethan,

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. 

All the best,
Petyo
the Telerik team

[Ethan]

Hi Petyo,

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.

This works fine:
http://jsfiddle.net/efinkel/HSEFs/26/

This is broken in the stock browser:
http://jsfiddle.net/efinkel/HSEFs/27/

I will use the solution above in my own code, but I thought you might like to look into it further.

Thanks,
Ethan

[Petyo]

Hello Ethan,

Thank you for sharing your findings - it is quite a non-obvious glitch. We will investigate further, perhaps it might be fixable. 

Regards,
Petyo
the Telerik team

[Dimo]

Hi Ethan,

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.

Regards,
Dimo
the Telerik team

[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]

Hi Alan,

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?

All the best,
Dimo
the Telerik team

[Alan]

It would be easier for me to post my project in a support ticket if that works for you guys.

[Anthony]

  I have the same problem, I'll try to separate out my logic and post it but what was the answer to Alan's problem?

This is on the Android emulator, it's also on my Motorola Moto G

The problem is I have a button, clicking it causes it to flash blue but not run the onclick method, if I click slightly to the top left of the button it fires the onclick

[Anthony]

Sorry, I can't delete or edit the last post.

Ignore that, I forgot you can't use the normal Kendo button on mobile. I'm using a KendoMobileButton now and it works