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

Question

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

在Mac Chrome 74和Safari上会发生这种情况。 Firefox似乎还不错。

按钮使用带有CSS变量的背景图像设置样式，代码如下：

elementYouWant = fixture.debugElement.query(By.css('#id-of-element'));

Codepen：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;

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