title: Chrome reload background on page resize when css has @supports
body: <p>I added to css this code:</p>
  <pre><code>@supports not (background-image: url('../assets/pages/home/bg.webp')) {
      background: url('../assets/pages/home/bg.png') no-repeat center var(--bs-primary);
      background-size: cover;
  }
  @supports (background-image: url('../assets/pages/home/bg.webp')) {
      background: url('../assets/pages/home/bg.webp') no-repeat center var(--bs-primary);
      background-size: cover;
  }
  </code></pre>
  <p>It works. But, when I resize a browser chrome, I see a lot of requests to load the same image.</p>
  <p><a href="https://i.stack.imgur.com/N178z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N178z.png" alt="enter image description here" /></a></p>
  <p>In Firefox all looks ok.</p>