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

Question

我正在使用 ionic 和 angular 创建适用于 Android 和 iOS 的应用程序。在 android 上一切正常。 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

可能是cache存储在浏览器中的问题。尝试禁用cache并检查

Answer 2

据我了解，这是 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>

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