some CSS rules are not updating in Safari

Question

Note this is not because the css is incorrect or because Safari doesn't support these rules, its not that type of problem. I can uncheck and check the rule in the inspector and it works.

Im using Vue with sass for my website. The css works fine on every other browser, but on safari, theres a few instances where some seemingly random css rules are not taking effect.

The first example is this button, that gets enabled when the input is checked.

The button currently has the disabled class

When I check it, it removes the disabled class, meaning the background-color will be green and the font color white, this is the result

As you can see the background-color changed, but the font remained black. even though it has been updated in the inspector. In the inspector if i check the color property off and on, it will update and be correct.

Im applying these styles in the standard sass way shown below

button {
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    padding: 8px 12px;
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $secondary-color;
    border: 1px solid $med-light-grey;
    color: $black;

    &.disabled {
        pointer-events: none;
        cursor: not-allowed;
        background-color: $light-grey;
        border-color: $med-light-grey;
        color: $off-black;
    }
}

I apply it to the button like this

The class does apply and remove correctly in the inspector and the color updates on every other browser

Im on Safari Version 14.1, on a new private browser, no cache, storage or anything. I dont know what could be causing this.

Here is another example where it happens

The content class stretches to 100%. But when i resize the window, making it a little bigger, the div doesnt stretch with it, so theres a gap. The background stretches as it should, and the header above it too. If i just uncheck and check the display: grid rule, everything works as it should and I can resize freely and the div will follow.

Im not sure if this is a browser issue, or the way my website is built, here are the versions that im using

"node-sass": "^5.0.0",
"sass-loader": "^10.2.0",
"vue": "^2.6.14"

Any help would be appreciated

user_7475465 · Answer

Going to answer my own question, this was the problem for the button

pointer-events: none;

the pointer events property seems to be bugged on Safari and it will stop the DOM updating the color rule. I have found this codepen that replicates the problem and will fix when removing it.

Im guessing the 2nd example I showed is doing the same sort of thing with another property, but its a problem on Safaris end, so for that I will just restructure the html and css.

 [codepen][1]

some CSS rules are not updating in Safari

1 Answers