Why is the background-image in a pseudoelement assigned through a css custom property fetched and rendered every time a new class is added or removed?

Question

I have the following html in the document body, CSS and Javascript code:

const bgContainer = document.querySelector('.bg-container');
bgContainer.addEventListener('mouseover', () => {
  bgContainer.classList.add('test');
});
bgContainer.addEventListener('mouseout', () => {
  bgContainer.classList.remove('test');
});

.bg-container {
  height: 50vh;
  position: relative;
  --background: url('https://specials-images.forbesimg.com/imageserve/513343414/960x0.jpg?fit=scale');
}

.bg-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: blue;
  background-size: cover;
  background-image: var(--background);
}

<div class="bg-container"></div>

Every time I hover in and out of the background container, the background image is fetched and rendered thereby resulting in a flash of layout change. Why does that happen and how do I avoid that?

Answer 1

The issue was due to me having the Chrome Dev Tools open with cache disabled. Enabling cache resolves the issue.