iOS 10：更改类别时无法应用CSS样式

Question

我正在使用Ionic和Angular创建一款适用于Android和iOS的应用程序。在Android上一切都正常工作。而iOS则是问题所在（当然）。

我正在使用ng-class对一个元素应用类更改。我可以在Safari检查器中的HTML和CSS中看到类的更改。但是我在屏幕上看不到这些更改。唯一能看到这种更改的方法是如果我操纵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 已经 应用，但除非我在检查器中操作任何与该元素相关的样式，否则我无法看到更改。

这是一个错误吗？还是我可以解决它？

更新 我刚刚在iOS 9设备上尝试了一下，它完美地工作。似乎是一个10的问题。

更新2 我觉得这是一个flexbox问题。我让它们填充屏幕成为一列，但当底部没有内容时，我给它零高度。 它表现得很奇怪。我重新格式化了HTML以使其以不同的方式工作。但我希望将其保留下来，以防其他人遇到此问题。

- ntgCleaner

---

有什么解决方法吗？ - Fernando Leal

可能影响这种行为的是，我正在使用 WKWebView。@ntgCleaner，您也在使用 WKWebView 或 UIWebView 吗？ - Fernando Leal

您好，能否提供一个CodePen或JSFiddle，以便我们可以直接在iOS上进行测试。谢谢。 - viCky

你正在使用哪个版本的Ionic？ - Pradeep Rajput

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>

- maninak

---

这似乎是一个很好的解决方案，我很快就在我的情况下实施了它。但令我悲伤的是，行为变得更加奇怪，因为样式仍然没有应用于视图（在我的情况下，我向元素添加一个类，该类出现在那里，并且在样式树中也有其样式，只是未应用于视图），并且基于相同变量（使用ngIf）创建了相关的span。在我的情况下，我放置了一个值span以更清楚地看到结果。 - Fernando Leal

我注意到的其他细节是，这个问题只会发生在需要滚动才能看到的项目上。并且在视图滚动后，样式也会被更新。 - Fernando Leal

Answer 2

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

- Edison Augusthy

---

很不幸的是，这并不是缓存问题。我已经禁用了缓存，但效果还是一样。我想这应该是一个 bug。我已经重新格式化了代码以采用不同的方式运行。 - ntgCleaner

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

- M. Hanafi

---

这与问题中的CSS有何不同？为什么会起作用？请更好地解释您的答案。 - Fernando Leal

我不知道发生了什么，但我遇到了同样的问题，然后我尝试了这个方法，它完美地运行了。 - M. Hanafi

但是你的代码和问题中的代码完全一样吗？你可能弄混了发布的代码，或者它根本没有意义。你能否看一看，看看你的代码与问题有何区别？ - Fernando Leal