每次样式更新时，浏览器都会下载背景图片（使用 CSS 变量设置），为什么？

Question

当我将鼠标悬停在页面上时，我注意到页面上的按钮闪烁（会改变不透明度）。经过一番挖掘，发现每次样式更新时，浏览器都会重新下载该图像。

这发生在 Mac Chrome 74 和 Safari 上。Firefox 看起来不错。

这些按钮使用带有 CSS 变量的 background-image 样式，代码如下所示：

body {
    --src-image: url("some image");
}

.btn {
    background-image: var(--src-image);
}

.btn:hover {
    opacity: 0.7;
}

代码笔：https ://codepen.io/polyamide/pen/qzEVzO

复现步骤：

1. 打开 DevTool 并禁用缓存。
2. 将鼠标悬停在第二张图片上（这个使用 CSS 变量，而第一个没有）。
3. 请参阅网络面板。样式更新时会有新的请求。

避免使用 css 变量解决了问题，但我仍然想了解为什么会发生这种情况，我该如何解决？

Answer 1

我在 Safari 和 Firefox 中也遇到同样的问题。不闪烁的唯一方法是不使用图像变量：

background-image: url("some image");

我已经尝试了很多解决方案，例如添加以下内容：

-webkit-transform-style: preserve-3d;

但这些“解决方案”根本不起作用。