背景用 var 时，如果另一个 var 更改了，背景会闪白

如题，最近刚知道 css 可以用 var 语法动态更新，但现在遇到了一个问题：如果背景用 var 的话，其他 var 变化的时候背景就会闪一下，如果是连续变化就会一直闪白。感觉原因是更新其中一个 var ，全部 var 都会重新载入一遍。。。

如何解决这个问题？

示例代码： 这个例子里，如果实时改变--color1 ，背景会一直闪白 https://jsfiddle.net/5ct9z6wL/

<div id='background_img'>

</div>

<span id="another_var">asdfadfs</span>

<style>
#background_img{
background: var(--background_img_url);
    width: 661px;
    height: 431px;
}

#another_var{
color:var(--color1);
}

:root{
--background_img_url:url('https://i.imgur.com/GHiyiSx.jpeg');
--color1:red;

}
</style>