Search code examples
csshyperlinkbordermobile-safarimobile-webkit

Tapping links in iOS Safari shows a thick white border around element - how to get rid of it?

Problem

On my site I see this super strange behaviour on any kind of linked elements (text, images, svg elements, table cells): when long tapping them in Safari on iOS, a thick white border appears before showing the link preview.

enter image description here enter image description here

enter image description here enter image description here

enter image description here

What I have tried so far

As it's only showing on iOS, I am a bit limited with debugging it, unfortunately.

I have tried to fix it using the following most recommended solutions with link tap in iOS Safari, but neither of them does solve the issue:

html {
    -webkit-tap-highlight-color: transparent;
}
a, a:visited, a img {
    -webkit-background-clip: content-box;
}
input, textarea, button, select, label, a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}

Solution ideas?

Does anybody know, or has an idea, how I can get rid of this border - or at least also make it appear "transparent"?

Much appreciated!

Solution

  • RESOLVED: seems like the thick white border is not the border, but related to the background color of the element / linked element. And it is controllable through the :active state.

    Fixed by adding this to my CSS:

    a:active {
    background-color: transparent;
}

    Solution inspired by the answer here: https://stackoverflow.com/a/12686281/5750030