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

Posted 2023-03-06

【中文标题】iOS 10：CSS 样式未应用于类更改

【英文标题】：iOS 10 : CSS styles not being applied on class change

【发布时间】：2017-03-09 05:55:45

【问题描述】：

我正在使用 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 以使其以不同的方式工作。但我想把它保留在那里，以防其他人遇到这个问题。

【问题讨论】：

任何解决方法？

可能会影响这种行为的东西，我正在使用 WKWebView。 @ntgCleaner 你也在使用 WKWebView 或 UIWebView？

您好，请您提供一个codepen或jsfiddle，以便我们直接在iOS上进行测试。谢谢

您使用的是哪个版本的 ionic？

【参考方案1】：

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

【讨论】：

不幸的是，这不是缓存问题。我禁用了缓存并具有相同的效果。我想说这是一个错误。我已重新格式化代码以使用不同的方式。

【参考方案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>

【讨论】：

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

我注意到的其他细节是，这个问题只发生在只有滚动可见的项目上。并且在视图中滚动后样式也会更新。

【参考方案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;
  

【讨论】：

这与问题的css有什么不同？为什么会这样？更好地解释你的答案。

我不知道到底发生了什么，但我遇到了同样的问题，然后我尝试完美地工作

但是您的代码与问题的代码完全相同吗？要么您混淆了发布的代码，要么它没有任何意义。你能看一下，看看你的代码与问题有什么不同吗？