title: Force/3dTouch gesture on iphone gives weird background for <a> element
body: <p>I have button which is <code>&lt;a&gt;</code> element with href, which doesnt have any background set on <code>:active</code>/<code>:focus</code>/<code>:visited</code>, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <code>&lt;a&gt;</code> doesnt have any children e.g. <code>&lt;span&gt;</code> etc so I suppose this is the text node highlight).</p>
  
  <p><a href="https://i.stack.imgur.com/ryKtt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ryKtt.png" alt="enter image description here"></a></p>
  
  <p>here's the gif to illustrate the behavior.
  <a href="https://i.stack.imgur.com/jqEev.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jqEev.gif" alt="enter image description here"></a></p>
  
  <p>I've tried adding <code>-webkit-tap-highlight-color: transparent</code> but it changes only regular tap color, not the forced/3d one</p>
  
  <p><a href="https://i.stack.imgur.com/V9kyS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V9kyS.png" alt="enter image description here"></a></p>
  
  <p>also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well</p>
  
  <pre><code>::selection {
    background: transparent;
  }
  
  ::-webkit-selection {
    background: transparent;
  }
  
  ::-moz-selection {
    background: transparent;
  }
  </code></pre>
  
  <p>Any ideas about possible origin of this?</p>