Why aren't my website radio buttons clickable on iPhone/iPad?

Question

I have a website at tbmaster.co.uk which has 3 radio buttons and they work fine in normal browsers but when I use a iPhone/iPad to view the site I am unable to click the radio buttons.

If you look at the source there is some JavaScript going on to set the states of radio buttons and other things so not sure if this is the problem

Answer 1

Your <div class="postit"> is the problem. On the iPad, it just covers the radio buttons and keeps click events from getting through. If you adjust the size of your non-iPad browser you can get the same effect. Try making your .postit thinner so that it won't cover up the radio buttons; or you could try playing the z-index of the form and .postit to get the form on top.

You'll also notice that you can't click the ADD ANOTHER SERIAL button but you can click the other two buttons, ADD ANOTHER SERIAL is buried under the .postit but the other buttons are not. And similar issues will apply to Machine ID .