Safari 6 border lingering after hover with border radius set

Question

I have a typical link on a page. On hover, the link receives a border color and border-radius. In Safari 6, I am noticing that when the mouse leaves the link there is a very faint border color left behind. If you hover again over the link, the border gets darker and darker in some cases, even though the border-color is not set. If border-radius is not set, the issue does not occur.

I cannot repeat the issue in Firefox or Chrome (for Mac). The simplest fix I found was to specify a solid or transparent border color for the base anchor style. Could this just be a Safari rendering bug?

Link for the rendering issue: http://jsfiddle.net/zafer/msnak/4/

Can't replicate this. Definitely not a problem with your screen/eyes? — Billy Moat, Aug 03 '12 at 21:02
I double-checked on someone else's Safari 6 and the issue still appears. The border does get very dark as you hover over repeatedly. It looks like this: http://i.imgur.com/BvY2p.png — Erol, Aug 03 '12 at 21:12
Ah. So it wasn't just me. Noticed that since last week. Still haven't found a solution. It looks good at first, but when you roll over and out again and again, it gets just like your screenshot. — Nando Vieira, Aug 03 '12 at 22:26
Forgot to mention that the background-clip trick doesn't fix this issue. — Nando Vieira, Aug 03 '12 at 22:28

Lehlabile Alladyce Kekana · Answer 1 · 2013-01-28T09:05:17.360

0

Try making the border-radius value equal to the padding on the anchor element and see if that doesn't help. I had the same problem in Safari 6 as well and that seemed to have fixed it.

So your CSS code would look something like this:

a {
  display: inline-block;
  padding: 15px;
  border-radius: 15px;
}

a:hover {
  background: #004184;
}

edited Jan 28 '13 at 09:05

answered Jan 28 '13 at 09:00

Lehlabile Alladyce Kekana

31
3

score 0 · Answer 2 · answered Jan 31 '13 at 21:40

just ran into same issue and found that using even values (2,4,6,..) as radius fixed it for me, like so:

a{
    color: white;
    padding-right: 9px;
    padding-left: 9px;
}
a:hover{
    background-color: green;
    border-radius: 4px;
}

regardless of different padding values.

score 0 · Answer 3 · edited May 23 '17 at 11:56

0

The background-clip solution did fix the problem for me, check the details on https://stackoverflow.com/a/3447130/1200097 it is possible that your properties need to be reordered.

edited May 23 '17 at 11:56

Community

1
1

answered Feb 18 '13 at 12:57

Siniša Šašić

131
7

Safari 6 border lingering after hover with border radius set

3 Answers3