在使用 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。Cache-Control某些常见服务（例如 S3）默认不返回标头。

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