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

Question

我正在使用 CSS 自定义属性为 div 设置背景图像。 div 嵌套在锚标记内，表示可点击的 "card" 路由到另一个页面。

在 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 header 对图像进行 return 编辑来抑制这种闪烁（和重新获取）。默认情况下，某些常见服务（例如 S3）不会 return Cache-Control header。

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

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

On Chrome background images set with CSS custom properties flicker when inside an anchor tag

css

google-chrome

css-variables