iOS 10 : CSS styles not being applied on class change

Question

我正在使用 ionic 和 angular 为 Android 和 iOS 创建一个应用程序。在安卓上一切正常。 iOS 是问题所在(当然)。

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

这是带有 Angular 的 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 IS，但在检查器中操作任何样式(与元素相关)之前我无法查看更改。

这是一个错误吗？或者我可以解决的问题？

更新 我刚刚在 iOS 9 设备上试过它，它运行良好。这似乎是一个 10 的问题。

UPDATE 2 我觉得这是一个 flexbox 问题。我让它们作为一列填充屏幕，但是当它没有内容时，我给底部一个零高度。这很有趣。我重新格式化了 html 以使其以不同的方式工作。但我想把它放在那里，以防其他人遇到这个问题。

Answer 1

据我所知，这是 iOS 10 webview 没有重新呈现模板的问题，即使类已正确更改并应用。

所以我们想要实现的是在类更改时强制重新渲染模板。我们知道，每次对象成员 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>