iOS 10 : CSS styles not being applied on class change

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>

may be the problem of cache storing in browser.just try disabling cache and check

try this

.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; }.avatar-view__initial__question.question-show {   padding: 20px 10px 20px 60px;   height: auto !important; }.avatar-view__initial__question.question-hide {   height:0 !important;   padding:0 10px 0 60px; }