iOS 10: Sınıf değişikliği uygulanmayan CSS stilleri

Question

Android ve iOS için bir uygulama oluşturmak üzere açısal ile iyonik kullanıyorum. Android'de her şey iyi çalışıyor. iOS sorun (elbette).

ng-class kullanarak bir öğeye sınıf değişikliği uygularım. HTML ve CSS'de safari denetçisinde sınıf değişikliğini görebiliyorum. Ancak ekrandaki değişiklikleri görmüyorum. Değişikliği görebilmemin tek yolu, CSS seçicisini (bir stili açma/kapama kadar basit) manipüle etmekti. Ben manipüle kadar değişiklik görüntüleyemezsiniz olsa

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

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

Ben de belirtildiği gibi, IS uygulanan CSS: Burada

Eğik HTML bulunuyor Müfettişteki herhangi bir stil (eleman ile ilgili).

Bu bir hata mı? ya da etrafta çalışabileceğim bir şey var mı?

UPDATE Bunu bir iOS 9 aygıtında denedim ve mükemmel çalışıyor. 10 problem gibi görünüyor.

UPDATE 2 Bu bir flexbox sorunu gibi hissediyorum. Ekranı bir sütun olarak doldurmalarını sağladım, ancak içinde hiç içerik bulunmadığında alt sıfırın yüksekliğini veriyordum. Komik davranıyordu. Farklı çalışmasını sağlamak için html'yi yeniden biçimlendirdim. Ama başka birinin bu konuya sahip olması durumunda bunu dışarıda tutmak isterim.

Answer 1

cache devre dışı bırakmayı deneyin ve bunu sınıf doğru değişmiş olsa dahi, şablonunu yeniden oluşturulmuyorsa iOS 10 Web görünümündeki bir konu anladığım

Answer 2

kontrol browser.just içinde depolanması cache sorunu olabilir ve uygulandı.

Peki, elde etmek istediğimiz şey, sınıf değişikliğinde bir şablon yeniden oluşturmayı zorlamak. Nesne elemanının speech.captured değerini değiştirdiğinde, sınıfın her değiştiğini biliyoruz.

<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

bu

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