title: some CSS rules are not updating in Safari
body: <p>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.</p>
  <p>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.</p>
  <p>The first example is this button, that gets enabled when the input is checked.
  <a href="https://i.stack.imgur.com/Bbk8i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bbk8i.png" alt="unchecked" /></a></p>
  <p>The button currently has the disabled class</p>
  <p><a href="https://i.stack.imgur.com/0KGUn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0KGUn.png" alt="disabled button" /></a></p>
  <p>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</p>
  <p><a href="https://i.stack.imgur.com/X5t3W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X5t3W.png" alt="result" /></a></p>
  <p>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.</p>
  <p>Im applying these styles in the standard sass way shown below</p>
  <pre><code>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;
  
      &amp;.disabled {
          pointer-events: none;
          cursor: not-allowed;
          background-color: $light-grey;
          border-color: $med-light-grey;
          color: $off-black;
      }
  }
  </code></pre>
  <p>I apply it to the button like this</p>
  <pre><code>&lt;button v-if=&quot;!loading&quot; @click=&quot;initalise()&quot; class=&quot;submit&quot; :class=&quot;{ disabled: !agreed }&quot;&gt;Start&lt;/button&gt;
  </code></pre>
  <p>The class does apply and remove correctly in the inspector and the color updates on every other browser</p>
  <p>Im on Safari Version 14.1, on a new private browser, no cache, storage or anything. I dont know what could be causing this.</p>
  <p>Here is another example where it happens</p>
  <p><a href="https://i.stack.imgur.com/7gj1e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7gj1e.png" alt="100% width" /></a></p>
  <p>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.</p>
  <p>Im not sure if this is a browser issue, or the way my website is built, here are the versions that im using</p>
  <pre><code>&quot;node-sass&quot;: &quot;^5.0.0&quot;,
  &quot;sass-loader&quot;: &quot;^10.2.0&quot;,
  &quot;vue&quot;: &quot;^2.6.14&quot;
  </code></pre>
  <p>Any help would be appreciated</p>