CODEWITHSUNDEEP
google-chromehovercss-transitions
chicgeek
chicgeek

Reputation: 506

Hover transition only working on first instance in Chrome

This should be a simple thing: four linked SVGs in an inline list, each with a smooth transition from grey to colour on hover. However, in Chrome, only the first item in my list transitions - the others do not. The transitions work as expected for all items in Firefox.

Jump to it on JS Fiddle, or see the snippets below: http://jsfiddle.net/chicgeek/NZpXs/1/

Here's the relevant CSS:

.social svg {
  height: 60px;
  width: 60px;
}
.social path {
  fill: #ccc;
  -moz-transition: all .8s linear;
  -webkit-transition: all .8s linear;
  -ms-transition: all .8s linear;
  -o-transition: all .8s linear;
  transition: all .8s linear;
}
.social a:hover path.twitter {
  fill: #4099FF;
}
.social a:hover path.facebook {
  fill: #3B5998;
}
.social a:hover path.github {
  fill: #171515;
}
.social a:hover path.linkedin {
  fill: #0e76a8;
}

And the markup [truncated]:

<section class="social">
  <ul>
    <li><a href="#" target="_blank">
      <svg ...>
      <path class="twitter" d="..."/></svg>
    </a></li>
    <li><a href="#" target="_blank">
      <svg ...>
      <path class="facebook" d="..."></path></svg>
    </a></li>
    <...>
  </ul>
</section>

The :hover style works as expected, but there is no transition. The inspector in Chrome shows that the .social path selector is fine (they all display fill: #ccc; to confirm this, too).

I've done my best to scour existing questions here for a solution to this with no luck. Any help is welcome!

Upvotes: 1

Views: 891

Answers (1)

chicgeek
chicgeek

Reputation: 506

More investigating and I've determined it is a known Chrome bug. Chrome seems to have issues with applying transitions to visited links.

For the example above, it always works impeccably in incognito mode.

For more information:

Upvotes: 2

Related Questions