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

Question

我正在使用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

Answer 1

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

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