Question

我正在使用ionic with 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设备上试过这款游戏，效果非常好。这似乎是一个十大问题。

更新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>

Answer 2

可能是cache存储在浏览器中的问题。请尝试禁用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;
 }

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

3 个答案: