访问过的链接在 Chrome 中丢失 CSS 颜色动画答案

【问题标题】：Visited links lose CSS color animation in Chrome访问过的链接在 Chrome 中丢失 CSS 颜色动画
【发布时间】：2015-09-21 15:15:10
【问题描述】：

我正在尝试在链接上设置彩色动画。在 Chrome 中访问链接后，将不再应用彩色动画。其他动画样式（我测试过背景颜色、字体粗细和字体大小）和其他浏览器（Firefox、Safari、IE11）都不是这种情况。

这是一个演示：

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; }
}

重现步骤：

访问上面的链接
注意链接有不同的动画
点击其中一个链接（全部指向 href="#"）
请注意，彩色动画链接不再动画
从浏览器历史记录中删除链接并刷新
请注意，一旦从历史记录中删除链接，动画就会返回

在 Mac OS 10.9.5 上使用 Chrome 版本 43.0.2357.130

【问题讨论】：

我在 Chromium 上提出了一个问题，但同时希望能有一个工作。 code.google.com/p/chromium/issues/detail?id=506898
我也有这个问题，我猜它与 CSS 漏洞有关，限制了修改访问链接的可能性，除了非常基本的属性（例如颜色等）。我不确定，但是在这里阅读了其他问题后，这似乎是唯一有意义的解释。如果没有，有人可以澄清一下吗？
你是否使用了像 normalize.css 这样的 CSS 重置？
不。这实际上被 Chromium 团队标记为错误；修复正在进行中。
您不会再看到上述标记/CSS 的问题，因为 Chromium 团队解决了这个错误。 code.google.com/p/chromium/issues/detail?id=506898

标签： css google-chrome animation hyperlink visited

【解决方案1】：

我认为这与过去的一些一般安全/隐私问题有关：

我们正在限制可用于设置已访问样式的 CSS 属性指向颜色、背景颜色、边框*颜色和轮廓颜色的链接以及填充和描边属性的颜色部分。

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/

【讨论】：

【解决方案2】：

您之前可以使用动画，但现在大多数浏览器限制在访问时使用 css 样式。只有属性允许是

颜色
背景色
边框-*-颜色
轮廓颜色和
填充和描边属性的颜色部分。

source

为什么

以前人们习惯使用访问过的黑客来找出您访问过的网站。

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

【讨论】：