Bootstrap 3 radio buttons do not work with fastclick on iphone

Question

I'm using fastclick with my bootstrap 3 responsive web site to speed up the responsive time on mobile devices. Generally this works fine with no issues. However after much testing I have found this breaks the bootstrap radio buttons on an iphone.

The buttons do work initially but if you change the selected option only the first selected options is passed when the form is submitted. Removing fastclick stops this behavior. Or more to the point on my minimal testing page adding fastclick will make the behavior occur. This happens both in safari and chrome on iphone.

I have found articles saying that adding jquery-mobile and adjusting the markup of the radio buttons will also improve responsive times. However I have using jquery-ui slider quite a bit in the site and adding in jquery mobile conflicts. My aim was to disable fastclick on the radio buttons (via the 'needsclicks' class) and let jqmobile take care of it.

Much work as been gone into customising the slider for the site and to make it work and look nice on mobiles devices. I do not want to re engineer the entire site on the hope that adding in jqmobile will help. Nor do we have the time.

How can I solve this. I surprised that I cannot find any other data on using fastclick with bootstrap radio buttons. Sure I can disable the fastclick on the radio buttons but it makes them terrible to use and this is not acceptable for this application.

There is some way I can manually fix these radio buttons to work with iphone. This is not an issues on Android. Is there a fix I've not found?

Answer 1

Reproduced this issue also on ipad.

Problem: Fastclick triggers two click events: one for the label and one (bubbling) for the input:radio.

Solution: use 'needsclick' class on input:radio field. More info: https://github.com/ftlabs/fastclick#use-case-2-twitter-bootstrap-222-dropdowns