iOS 10 : CSS styles not being applied on class change

ionic-v1
1

I am using ionic with angular to create an app for Android and iOS. On android everything is working fine. iOS is the problem (of course).

I am applying a class change to an element using ng-class. I can see the class change in the safari inspector in the HTML and the CSS. But I do not see the changes on the screen. The only way I can see the change is if I were to manipulate the CSS selector (as simple as turning on/off a style).

Here’s the HTML with Angular:

<div class="avatar-view__initial__question question-hide" ng-class="{'question-show': speech.captured === true, 'question-hide': speech.captured === false}">{{question.text}}</div>

and the CSS

  .avatar-view__initial__question {
    text-align: left;
    background-color: #E9EBEF;
    font-size: 1.5em;
    position: relative;
    background-image: url(../img/icons/icon-ear.svg);
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    flex-shrink:1;
    @extend .css-animate;

    &.question-show {
      padding: 20px 10px 20px 60px;
      height: auto !important;
    }
    &.question-hide {
      height:0 !important;
      padding:0 10px 0 60px;
    }
  }

As I mentioned, the CSS IS being applied, though I can not view the change until I manipulate the any style (pertaining to the element) in the inspector.

Is this a bug? or something I can work around?

I just tried this on an iOS 9 device and it works perfectly. It seems to be a 10 problem.

1 Like