0

It appears that Chrome has been fixed and this is no longer a problem.

a:hover {
    outline: 0;
}

a {
    position: relative;
    color: blue;
    text-decoration: none;
    transition: color 0.2s ease-in;
}

a:hover {
    color: green;
}

a:after {
    background: green;
    content: '';

    width: 100%;
    height: 2px;

    position: absolute;
    top: 100%;

    left: 0;
}

JSFiddle here.

Using this CSS, hovering over links causes them to flicker and then turn invisible. If you mouse back out, they remain invisible.

Not only that, but any links in the last line of the paragraph still work fine (see the fiddle; it's crazy).

Removing the color transition on the anchor or removing the :after pseudo-element fixes the problem, but obviously that's not going to cut it.

Most interestingly, when I remove outline: 0, everything works as expected. I've since removed the line from my project since I don't need it (I'm using normalize.css and it was in there).

Does anybody know what's going on here? outline:none doesn't suffer from the same problems.

0x0049
  • 736
  • 6
  • 6
  • Chrome does incredibly weird things with outlines. [This is not the first time I've seen Chrome behave oddly with outlines on `a` elements.](http://stackoverflow.com/questions/23642290/ie-offsetting-and-ignoring-height-width-of-anchor-focus-outlines/23644188#23644188) – BoltClock Jun 01 '14 at 05:58
  • I suspect the reason `outline: none` doesn't suffer from the same problems is because `none` is the initial value of `outline-style`. When you leave out the width you're setting it to its initial value which is `medium` - it looks like setting *anything* other than the initial value for any of the component properties causes Chrome to act the way it does. – BoltClock Jun 01 '14 at 06:00

0 Answers0