Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Visited links lose CSS color animation in Chrome

I'm trying to set color animations on links. Once a link has been visited in Chrome, the color animation is no longer applied. This is not the case for other animated styles (I've tested background color, font weight, and font size) nor in other browsers (Firefox, Safari, IE11).

Here's a demo:

http://codepen.io/benjarwar/pen/rVJbeR
http://s.codepen.io/benjarwar/debug/rVJbeR

HTML:

<a href='#' target='_blank' class='color'>Color Animation</a>

CSS:

a.color,
a.color:visited {
  -moz-animation: color-animation 1s ease-in-out infinite;
  -webkit-animation: color-animation 1s ease-in-out infinite;
  animation: color-animation 1s ease-in-out infinite;
}

@-moz-keyframes color-animation {
  0% { color: #f00; }
  50% { color: #fc0; }
  100% { color: #f00; }
}

@-webkit-keyframes color-animation {
  0% { color: #f00; }
  50% { color: #fc0; }
  100% { color: #f00; }
}

@keyframes color-animation {
  0% { color: #f00; }
  50% { color: #fc0; }
  100% { color: #f00; }
}

Steps to reproduce:

  1. Visit the link above
  2. Note the links have different animations
  3. Click one of the links (all point to href="#")
  4. Note that the color animation link is no longer animating
  5. Remove the link from your browser history and refresh
  6. Note that the animation returns once the link is removed from the history

Using Chrome Version 43.0.2357.130 on Mac OS 10.9.5

like image 438
benjarwar Avatar asked Jul 03 '15 18:07

benjarwar


People also ask

How do I change the color of visited links?

Step 2: Now go to Content > Fonts & Colors > Colors. In the “Colors” windows, change the color of “Visited Links:” to your desired one, select Always in the drop-down menu, and click the “OK” button to save your changes.

Which color is considered a visited link?

An unvisited link is underlined and blue. A visited link is underlined and purple. An active link is underlined and red.


2 Answers

I think this is related to some general security/privacy issue in the past:

We’re limiting the CSS properties that can be used to style visited links to color, background-color, border-*-color, and outline-color and the color parts of the fill and stroke properties.

https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/

like image 165
Möhre Avatar answered Sep 29 '22 00:09

Möhre


You could have used animation earlier but now most browsers restrict use of css style in visited. Only properties allow are

  1. color
  2. background-color
  3. border-*-color
  4. outline-color and the
  5. color parts of the fill and stroke properties.

source

WHY

Earlier people used to use visited hack to find out what websites you visited.

http://dbaron.org/mozilla/visited-privacy

like image 27
aWebDeveloper Avatar answered Sep 28 '22 22:09

aWebDeveloper