CSS color property doesn't work when used along side with pointer-events property in Safari OSX and iOS, whenever DOM gets updated

user_429107 0
Viewed 316

I have this problem where css color property doesn't work when used along side with pointer-events property in Safari OSX and iOS, whenever DOM gets updated.

Consider these simple codes below:

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 code also available here: https://codepen.io/ardnet5/pen/ZEKLXvM

Open that in Safari OSX and iOS, also on Chrome iOS, and click "Click Me!" to demonstrate.

In Safari browser, the css color property is NOT applied correctly - when use along with pointer-events property, whenever DOM gets updated (via Javascript event).

We see the correct color in Computed css in Safari dev tools. Still the wrong color show up on the screen (it supposed to shown red color on NON .disabled class, but instead it's STILL showing grey).

Btw, this is working in Chrome, and other browsers, in other OS (ie: Win).

Is there any workaround to make css color property work? or is this genuine bug in Safari?

Thanks in advance!

safari macos css javascript ios
2 Answers

comment out pointer-events: none; this line of code to verify, i have no problem with my personal test

user_59280690

we just wasted a bit of time till we found this question, apparently, this is true we had problems with Vue.js and the DOM not being updated properly when we wanted to disable the button.

Our final solution was to add the :disabled="$props.disabled" to the component plus adding a class as well (you should evaluate to use proper html syntax instead of a div use a proper button), you can do that with plain JS or Jquery as well and then style it

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

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

the final result it's the same and it works in all browsers.

user_64476100
Related