在使用 CSS 自定义属性设置的 Chrome 背景图像上，在锚标记内时会闪烁

Posted 2023-02-22

【中文标题】在使用 CSS 自定义属性设置的 Chrome 背景图像上，在锚标记内时会闪烁

【英文标题】：On Chrome background images set with CSS custom properties flicker when inside an anchor tag

【发布时间】：2019-10-15 16:32:51

【问题描述】：

我正在使用 CSS 自定义属性来设置 div 的背景图像。 div 嵌套在一个锚标记内，代表一个可点击的“卡片”，该卡片路由到另一个页面。

在打开开发工具并禁用缓存的 Chrome 中，当我单击卡片时，背景图像会闪烁。每次锚标签的状态发生变化时，它似乎都会再次获取图像。

此外，如果我在悬停时将文本装饰添加到锚标记，则图像也会在悬停时闪烁。

CSS 看起来像：

:root 
  --image-url: url("https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80")


.image-div 
  height: 100px;
  width: 100px;
  background-image: var(--image-url);
  background-position: 0;
  background-size: cover;

看笔： https://codepen.io/hally9k/pen/RmepVe

【问题讨论】：

我在 chrome 版本 74.0.3729.169 (Official Build) (64-bit) 中看不到它

@ArleighHix 每次锚点状态更新时似乎都会重新获取图像，只有在禁用缓存的情况下打开开发工具时才会注意到闪烁。每次锚点状态更新时，图像都会通过网络重新获取。

嗯，当你禁用缓存时会发生这种情况，每次重新绘制元素时，它都会获取最新版本。

嗯，真的像那样干巴巴的吗？ Firefox 似乎没有以这种方式运行。 Safari 确实如此。您能否指出一些文档、规范或其他文献来帮助我更好地理解这一点？

这似乎也发生在我身上，并且取决于机器。当开发工具打开并且仅在某些机器上时会发生这种情况。如果我将图像换成 base64 编码的图像；它停止发生。我也想了解更多；因为我看不出为什么用 CSS 变量声明的图像和就地声明的图像之间应该存在不一致的原因。

【参考方案1】：

我发现我可以通过确保返回带有Cache-Control 标头的图像来抑制这种闪烁（和重新获取）。默认情况下，一些常用服务（例如 S3）不返回 Cache-Control 标头。

以我的拙见，当您使用 CSS 自定义变量并重新绘制元素时，存在一个潜在的浏览器问题，导致它有时会重新获取图像。在我们的例子中，这只发生在转换元素时。 Cache-Control 标头利用了与资源缓存相关的更多低级浏览器功能。

【讨论】：

干得好，这解决了问题。缓存控制如何影响使用变量的背景图像的闪烁是很疯狂的。顺便说一句，这发生在我的 chrome 和 safari 上，并且只在真实设备上发生。很高兴听到您是如何发现这一点的。