CSS 颜色 属性 在 Safari OSX 和 iOS 中与指针事件 属性 一起使用时不起作用，每当 DOM 更新时

Question

我遇到这个问题，在 Safari OSX 和 [=50] 中与指针事件 属性 一起使用时 css 颜色 属性 不起作用=]，每当 DOM 更新时。

考虑下面这些简单的代码：

HTML:

<div class="test">
Click Me!
</div>

<div class="ux-capacity-variant   v-normal-bottom v-normal-right  disabled" >
    <div class="show-for-medium-up section-header  text-center capacity">128GB</div> 
</div>

<div class="ux-capacity-variant   v-normal-bottom v-normal-right  " >
    <div class="show-for-medium-up section-header  text-center capacity">258GB</div> 
</div>

<div class="ux-capacity-variant   v-normal-bottom v-normal-right  " >
    <div class="show-for-medium-up section-header  text-center capacity">512GB</div> 
</div>

Javascript (jQuery):

$(document).ready(function(){
$('.test').click(function() {
  $('.ux-capacity-variant').toggleClass('disabled');
});

});

CSS:

.ux-capacity-variant.disabled {
cursor: default;
pointer-events: none;
color: grey
}

.ux-capacity-variant{
color: red
}

Codepen 代码也可在此处获得：https://codepen.io/ardnet5/pen/ZEKLXvM

在 Safari OSX 和 iOS 以及 Chrome iOS 中打开它，然后单击“点击我！”演示。

在 Safari 浏览器中，css 颜色 属性 未正确应用 - 当与指针事件 属性 一起使用时，每当 DOM 更新时（通过 Javascript事件）。

我们在 Safari 开发工具中的 Computed css 中看到了正确的颜色。屏幕上仍然显示错误的颜色（它应该在 NON 上显示红色。禁用 class，但它仍然显示灰色）。

顺便说一句，这在 Chrome 和其他浏览器中有效，在其他 OS（即：Win）中有效。

是否有任何解决方法可以使 css 颜色 属性 起作用？或者这是 Safari 中的真正错误？

提前致谢！

Answer 1

注释掉pointer-events: none;这行代码验证一下，我亲测没问题

Answer 2

我们只是浪费了一点时间才发现这个问题，显然，这是真的我们在 Vue.js 和 DOM 上遇到了问题，当我们想禁用按钮时没有正确更新.

我们的最终解决方案是将 :disabled="$props.disabled" 添加到组件中并添加 class （您应该评估使用正确的 html 语法而不是 div 使用适当的 button)，您也可以使用纯 JS 或 Jquery 来实现，然后设置样式

  &--disabled {
    color: $color-button-disable;

    &:hover {
      background-color: unset;
      cursor: unset;
    }
  }

最终结果是一样的，并且适用于所有浏览器。