Flat UI Radiocheck plugin / radio buttons do not toggle (anymore) with iOS 8.4.1

Question

I am using the latest version of Flat UI Pro 1.3.2 (http://designmodo.com/flat/) and there seems to be a problem with the jQuery Plugin flatui-radiocheck v0.1.0 and iOS devices.

You can see the problem when you load their demo page: http://designmodo.github.io/Flat-UI/

Go to the section with the "Radio Buttons" and click on the two buttons "Radio is on" and "Radio is off" to toggle the radio button. This toggling (toggling the state "visually" as well as the state of the radio element in the DOM) works fine in all major desktop browsers (IE, FF, Safari (Windows)).

However there is a problem with Safari on iOS (I am running the latest iOS version on an iPhone 4s, 8.4.1): clicking the two radio buttons does not toggle their state anymore!

It seems to be related to (possibly the new version of) mobile Safari on iOS since it works fine on desktop browsers.

Any idea or help on how to debug this error is greatly appreciated!

Answer 1

I am using Flat UI Free (2.2.2) and have discovered the same issue.

I am not sure exactly why it is occurring but have been able to fix it by slightly tweaking the radiocheck plugin.

Inside of flat-ui.js where the radiocheck plugin definition is I changed:

// Adding 'nohover' class for mobile devices
var mobile = /mobile|tablet|phone|ip(ad|od)|android|silk|webos/i.test(global.navigator.userAgent);
if (mobile === true) {
   $this.parent().hover(function () {
      $this.addClass('nohover');
   }, function () {
      $this.removeClass('nohover');
   });
}

to:

// Adding 'nohover' class for mobile devices
if (/iPhone|iPod|iPad/i.test(global.navigator.userAgent)) { //fix for ios
   $this.addClass('nohover');
} else {
   var mobile = /mobile|tablet|phone|ip(ad|od)|android|silk|webos/i.test(global.navigator.userAgent);
   if (mobile === true) {
      $this.parent().hover(function () {
         $this.addClass('nohover');
      }, function () {
         $this.removeClass('nohover');
      });
   }    
}

I don't use checkboxes so I don't know if they will be effected by this change.