bug: bug: Radio buttons have broken logical and visual state on iOS9 device

[zarko-tg]

Type: bug

Platform: ios 8 webview

Unpredictable / wrong behaviour of radio buttons / groups on iOS 9.
Build and run Ionic's own http://codepen.io/ionic/pen/saoBG on an iOS 9 device (iPhone). Note that it can only be reproduced on an actual device (and simulator probably).

Your system information:

Cordova CLI: 5.3.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.0
Ionic Version: 1.0.1
Ionic CLI Version: 1.6.4
Ionic App Lib Version: 0.3.8
ios-deploy version: 1.7.0
ios-sim version: 4.1.1
OS: Mac OS X Yosemite
Node Version: v0.12.7
Xcode version: Xcode 6.4 Build version 6E35b

[mhartington]

Confirmed, thanks!

[mahnuh]

Any progress with that issue? It makes nearly all my apps unusable :-(

[mhartington]

Working on it now

[Fpds]

Seems to be a problem with tilde combinator (~). Using plus (+) fixed the problem.

[mhartington]

@zarko-tg could you pull down the nightly builds and give it a test please?

[zarko-tg]

I would but it's weekend here already and I don't have a Mac at home (yet).
Let's see if someone else from the affected can step in in meantime.

[pbudner]

I experienced the same issue, seems to be fixed in the nightly builds.

[mahnuh]

Checkboxes do work again, great! But there is still one thing wrong. Custom icons are not working. I am using icon="ion-ios-checkmark-outline", but ion-checkmark is displayed.

[mhartington]

@mahnuh alright, I know what that is. Give me a sec

[mhartington]

@mahnuh do you mind pulling down the nightly builds again and trying that? Should be good now.

[mahnuh]

Works like charm! Thanks @mhartington, you are awesome!

[gabrielmaldi]

I just tried to reproduce this on the iOS Simulator (iOS 9.0 (13A340) with Xcode 7 GM seed) and wasn't able to do so. I tried both on Safari and inside a UIWebView.

I forked the original pen and changed Ionic nightly to 1.1.0 (which still uses ~ for radio buttons): http://codepen.io/gabrielmaldi/pen/ojxveB

I know that you guys already changed ~ to +, but I wanted to know if there would be a problem with my own ~ selectors. Since I couldn't reproduce the issue, I'm assuming that Apple fixed it in some iOS 9 beta release and that now it's safe to use ~? Or maybe it just reproduces on a device and not the simulator (would be really weird)? It would be really helpful if someone could confirm that there is no longer an issue with ~ on the current release of iOS 9 by trying to reproduce the original problem.

Thanks!

[mhartington]

@gabrielmaldi I was still able to break it in ios9 GM as well as ios 9.1 beta 1, so I think it's safe to say it is still broken.

[gabrielmaldi]

@mhartington I'll take a deeper look into it then, thanks!

[seanhelvey]

This issue was closed, but is there a fix? Stuck trying to get this working in an app right now.

[santekotturi]

Just discovered this in my Ionic app as well. Any updates? Tmp workarounds?

[mhartington]

Yes, this has been fixed in the nighty builds. You read more here. http://blog.ionic.io/preparing-for-ios-9/

[santekotturi]

Awesome, thanks @mhartington, you guys rock!

[bivainis]

As a quick fix, the following code did the job for me.
Thanks for a suggestion @Fpds

/**
 * There is a problem with radio buttons on iOS9
 * where Ionic's '~' combinator for radio button styles
 * doesn't work. Changing it into a '+' combinator fixes it.
 * n.b. might be fixed in later builds
 */
.item-radio input {

  &:checked + .item-content {
    background: #f7f7f7;
  }

  &:checked + .radio-icon {
    visibility: visible;
  }
}

[jonalling]

@mhartington I am still having issues with radio buttons in iOS 9.1. I updated to the latest Ionic master, and there was no improvement. A touch on an un-active radio doesn't select it, but a touch on an active radio selects the other un-active radio. ng-model seems to register correctly though, so it's just the styling.

System info:
Cordova CLI: 5.3.1
Gulp version: CLI version 3.8.11
Gulp local:
Ionic Version: 1.1.0
Ionic CLI Version: 1.7.7
Ionic App Lib Version: 0.6.3
ios-deploy version: 1.8.2
ios-sim version: 5.0.1
OS: Mac OS X El Capitan
Node Version: v0.12.0
Xcode version: Xcode 7.1 Build version 7B91b

[TomDoesb]

I'm experiencing the same issue as @jonalling

[jonalling]

@TomDoesRUG I was able to use the "ion-radio-fix" to make it work for now if you need a solution.

http://blog.ionic.io/preparing-for-ios-9/

[matteoferigo]

Same issue here, using directive…

<ion-radio class="no-border bg-white" ng-model="$parent.model" ng-value="null" icon="icon-check-circle positive">{{ t.everything }}</ion-radio>
<ion-radio class="bg-white" ng-repeat="option in options | orderBy: 'label'" ng-model="$parent.$parent.model" ng-value="option.value" icon="icon-check-circle positive">{{ option.label }}</ion-radio>

… as with the html directly

<label class="item item-radio no-border">
    <input type="radio" ng-model="$parent.model" ng-value="null">
    <div class="item-content">{{ t.everything }}</div>
    <i class="radio-icon icon-check-circle positive"></i>
</label>
<label ng-repeat="option in options track by option.value | orderBy: 'label'" class="item item-radio">
    <input type="radio" ng-model="$parent.$parent.model" ng-value="option.value">
    <div class="item-content">{{ option.label }}</div>
    <i class="radio-icon icon-check-circle positive"></i>
</label>

I'm running it inside the modal, works correctly with every plaftorm but fails in iOS 9.1:
when I'm tapping on a item-radio the things remains the same on the view, but if I'm scrolling the new tapped item displays that it's checked… but the old one remains checked as well; if i'm confirming the modal, data is served correctly.

Any help?

[mhartington]

@noldotar so this is fixed in the nightly builds, but you can use a external fix until we cut a new release (hoping to do that soon)

https://gist.github.com/mlynch/064d27912b511a63caa3

The main issue here is iOS9's support of the ~ selector, which is used in the radio css. But in the nightly builds/gist, we've changed the markup and css a bit to fix this.

So if you use the nightly builds or apply the gist, you can use

<ion-radio-fix></ion-radio-fix>

As your markup. To make sure it has been applied correctly, you can inspect the element and you should see a radio-content div next to the input.

      '<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>' +
      '</label>'

Also, make sure you are including the directive as a dependency. Please let me know if after review this, you still have issues.

[matteoferigo]

Ok, adding the fixes it works in iOS as well. Thanks a lot! Awesome customer care!!!