<picture> element srcset not working for chrome and edge

Question

I have a Flutter web app and I'm using the <picture> element to show a splash screen on the web.
I want to display splash screen with different pixel density depending on device.

My code:

<picture id="splash-branding">
  <source
    srcset="
      splash/img/branding-1x.png 1x,
      splash/img/branding-2x.png 2x,
      splash/img/branding-3x.png 3x,
      splash/img/branding-4x.png 4x
    "
    media="(prefers-color-scheme: light)"
  />
  <source
    srcset="
      splash/img/branding-dark-1x.png 1x,
      splash/img/branding-dark-2x.png 2x,
      splash/img/branding-dark-3x.png 3x,
      splash/img/branding-dark-4x.png 4x
    "
    media="(prefers-color-scheme: dark)"
  />
  <img
    class="bottom"
    aria-hidden="true"
    src="splash/img/branding-1x.png"
    alt=""
  />
</picture>
<picture id="splash">
  <source
    srcset="
      splash/img/light-1x.png 1x,
      splash/img/light-2x.png 2x,
      splash/img/light-3x.png 3x,
      splash/img/light-4x.png 4x
    "
    media="(prefers-color-scheme: light)"
  />
  <source
    srcset="
      splash/img/dark-1x.png 1x,
      splash/img/dark-2x.png 2x,
      splash/img/dark-3x.png 3x,
      splash/img/dark-4x.png 4x
    "
    media="(prefers-color-scheme: dark)"
  />
  <img
    class="center"
    aria-hidden="true"
    src="splash/img/light-1x.png"
    alt=""
  />
</picture>

But on chrome and edge, only the lowest quality image is used (1x image). It works well on Firefox (uses 2x image).
Also when using a mobile frame from chrome dev-tools, it works fine (uses 3x image).
It only doesn't work on chrome and edge in desktop mode.

Things I have tried:

• Changing src of <img> inside the <picture> element
• Changing image order in srcset
• Setting src of <img> inside the <picture> element to highest quality image