title: Weird CSS Transition Flickering on hover
body: <p>I recently encountered an 'Issue' in the Edge Browser using the following code leading to a weird hover transitioning behavior on links.</p>
  
  <p><strong>Take a look yourself:</strong></p>
  
  <ul>
  <li><a href="https://jsfiddle.net/js4hpoye/4/" rel="nofollow noreferrer">JSFiddle</a></li>
  <li><a href="https://slooob.com" rel="nofollow noreferrer">The App I'm working on ('Test' Link)</a></li>
  </ul>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;a&gt;&lt;h1&gt;Test&lt;/h1&gt;&lt;/a&gt;
  </code></pre>
  
  <p><strong>SCSS:</strong></p>
  
  <pre><code>* {
    transition: all .15s ease-in;
  }
  a {
    color: inherit;
    &amp;:hover {
      color: blue;
    }
  }
  h1 {
    color: black;
  }
  </code></pre>