Skip to content

Instantly share code, notes, and snippets.

Last active October 13, 2022 15:07
  • Star 9 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mlynch/064d27912b511a63caa3 to your computer and use it in GitHub Desktop.
ionRadio fix for iOS 9 bugs
* ionRadioFix - fixes a bug in iOS 9 UIWebView that breaks the tilde selector in CSS. To
* use this fix, include it after your Ionic bundle JS.
* Note: due to Angular directive override limitations, you'll need to change any reference
* to <ion-radio> to <ion-radio-fix> to apply this patched radio button.
* Also, make sure to add the new CSS from the second part of this gist.
angular.module('ionic').directive('ionRadioFix', function() {
return {
restrict: 'E',
replace: true,
require: '?ngModel',
transclude: true,
'<label class="item item-radio">' +
'<input type="radio" name="radio-group">' +
'<div class="radio-content">' +
'<div class="item-content disable-pointer-events" ng-transclude></div>' +
'<i class="radio-icon disable-pointer-events icon ion-checkmark"></i>' +
'</div>' +
compile: function(element, attr) {
if (attr.icon) {
var iconElm = element.find('i');
var input = element.find('input');
'value': attr.value,
'disabled': attr.disabled,
'ng-value': attr.ngValue,
'ng-model': attr.ngModel,
'ng-disabled': attr.ngDisabled,
'ng-change': attr.ngChange,
'ng-required': attr.ngRequired,
'required': attr.required
}, function(value, name) {
if (angular.isDefined(value)) {
input.attr(name, value);
return function(scope, element, attr) {
scope.getValue = function() {
return scope.ngValue || attr.value;
* This CSS uses adjacent selectors instead of general sibling (~) selectors
* for ion radio that are broken in iOS 9 UIWebView.
* To apply the patch, include this CSS after your ionic.css include.
.item-radio input:checked + .radio-content .item-content {
/* style the item content when its checked */
background: #f7f7f7;
.item-radio input:checked + .radio-content .radio-icon {
/* show the checkmark icon when its checked */
visibility: visible;
Copy link

Copy link

So, did this change make it into master? I'm still seeing this

Copy link

JLNNN commented Oct 19, 2015

It seems that this isn't included in the master. Just added the changes manually and it worked :)

Copy link

bwalsh commented Nov 27, 2015

Thank you for this patch. Is it still needed now that 1.1.1 is out ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment