iOS 10：クラス変更にCSSスタイルが適用されていません

Question

AndroidとiOS用のアプリを作成するためにイオン性イオンを使用しています。アンドロイドのすべてがうまくいきます。 iOSが問題です（もちろん）。

ng-classを使用して要素にクラス変更を適用しています。私は、HTMLとCSSでSafariのインスペクタでクラスの変更を見ることができます。しかし、私は画面上で変更が表示されません。私が変更を見ることができる唯一の方法は、CSSセレクタを操作する場合（スタイルをオン/オフするなど）です。

ここで角度を持つHTMLです：私が述べたように、私が操作するまで、私は変更を表示することはできませんけれどもCSS は、適用されている IS、

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

と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; 
    } 
    } 

インスペクタの任意のスタイル（要素に関する）。

これはバグですか？私は回避することができますか？

更新日私はiOS 9デバイスでこれを試したところ、完全に動作しました。それは10の問題のようです。

更新2私はそれがフレックスボックス問題であるように感じます。私は彼らが画面に列として塗りつぶしてもらいましたが、内容がないときは底面の高さをゼロにしていました。それは面白い演技だった。私はそれが異なって動作するようにHTMLを再フォーマットしました。しかし、他の誰かがこの問題を抱えている場合に備えて、このままにしておきたいと思います。

Answer 1

cacheを無効にしてみてください、私はそれはクラスが正しく変更されているにもかかわらず、iOSの10 WebViewのない再レンダリングテンプレートの問題で理解して何から

Answer 2

をチェックbrowser.justで保存cacheの問題がある可能性があります適用されています。

私たちが達成したいのは、クラス変更時にテンプレートを再レンダリングすることです。オブジェクトメンバspeech.capturedが値を変更するたびにクラスが変更されることはわかっています。

<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> 

Answer 3

この

.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; 
}