iOS 10 :未应用于类更改的CSS样式

Question

我正在使用离子与角，以创建一个应用程序的安卓和iOS。在android上，一切都很好。iOS是问题所在(当然)。

我正在使用ng-class对元素应用类更改。我可以在HTML和CSS中的safari检查器中看到类的变化。但我没有看到屏幕上的变化。唯一能看到变化的方法是，如果我要操作CSS选择器(就像打开/关闭样式一样简单)。

下面是带有角的HTML：

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

正如我所提到的，CSS 正在应用，尽管在操作检查器中的任何样式(属于元素)之前，我无法查看更改。

这是个虫子吗？或者什么我能做的事？

UPDATE --我刚刚在iOS 9设备上试了一下，它工作得很好。这似乎是一个10个问题。

更新2我觉得这是一个柔性盒问题。我让他们把屏幕填成一列，但当它没有内容的时候，我却给出了下面的零高度。表现得很有趣。我对html进行了重新格式化，以使其工作方式有所不同。但我想把这个留着以防其他人有这个问题。

Answer 1

据我所知，这是iOS 10 webview没有重新呈现模板的问题，尽管类已经正确地更改和应用了。

因此，我们想要实现的是在类更改上强制执行一个模板重新呈现。我们知道，每当对象成员speech.captured更改值时，类都会发生变化。

因此，每当此值发生变化时，我们可以通过添加一个有条件呈现的空span来执行重呈现，如下所示：

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

可能是cache存储在browser.just中的问题，尝试禁用cache并检查

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