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

Posted 2023-03-06

【中文标题】访问过的链接在 Chrome 中丢失 CSS 颜色动画

【英文标题】：Visited links lose CSS color animation in Chrome

【发布时间】：2015-09-21 15:15:10

【问题描述】：

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

这是一个演示：

http://codepen.io/benjarwar/pen/rVJbeRhttp://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

【参考方案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