title: Css :hover not working on safari and ios always showing border
body: <p>Hihi, I'm sure this is an error from webkit or simething like this but I wasn't able to fix it.</p>
  <p>I have my development done with React and Sass as dendendency,
  When I try to run the app in google chorme everything seems normal but when using safari or iOS (ipad or iphone) the :hover for example is not working and it's always underlineing the  tag</p>
  <pre><code>a {
    text-decoration: underline rgba(0, 0, 0, 0);
    text-underline-offset: 2px;
    text-decoration-thickness: 3px;
    transition: text-decoration-color 300ms;
  }
  
  a:hover {
    -webkit-text-decoration-color: $black;
    text-decoration-color: $black;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/X8Cbn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X8Cbn.png" alt="safari" /></a></p>