我正在使用 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 以使其以不同的方式工作。但我想把它放在那里,以防其他人遇到这个问题。
最佳答案
据我所知,这是 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>
关于iOS 10 : CSS styles not being applied on class change,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40269517/