Does android add extra active area around submit buttons?

Question

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?

Answer 1

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.

Answer 2

I recommend using the reset.css stylesheet provided by meyerweb.com. It removes (almost) all styling that browsers would apply, but you may find you need to rework a lot of css and put a lot of stuff in such as <h1> tags.

CSS Tools: Reset CSS