Android seems be to be increasing the clickable area of a submit button on an HTML form I’m working on. It’s as if there’s about 25 pixels to the right of the submit button that are also tap-able. This is problematic because, in my design, to the right of the submit button is an <A> element with an event handler bound to it. Tapping the <A> often submits the form instead of firing the event handler. I’m doing most of my testing in Browerstack and some on real hardware. The problem exhibits in (virtual) devices with lower screen widths (e.g. 320px), and seems to be there in Android 2.3 and 4. The same pages in iPhone (4s, iOS6) and Blackberry (v7) don’t exhibit the problem.
Here’s a CodePen example, and a single file version of the same code for easier viewing on mobile
Has anyone else seen this? Is it a feature? A bug – either in Android or in my code?
have you tried applying a reset.css to it? It seems to be an android webkit issue.
Also, try to use 40px areas for tap buttons.