iOS 10 : CSS styles not being applied on class change

Question

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?

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

UPDATE 2 I feel like it's a flexbox problem. I had them filling the screen as a column, but I was giving the bottom one zero height when it had no content in it. It was acting funny. I reformatted the html to make it work differently. But I'd like to keep this out there in case someone else is having this issue.

Answer 1

From what I understand it's an issue of the iOS 10 webview not re-rendering the template, even though the class has correctly changed and been applied.

So what we want to achieve is enforce a template re-render on class change. We know that the class changes every time the object member speech.captured changes value.

So we could enforce re-render when whenever this value changes by adding a conditionally rendered empty span like this:

<span *ngIf="speech.captured"></span>

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