Why is the second background image not displaying after rotating my device?

Question

I have two background images to create a layered effect and to keep the file sizes small. There's a repeating star pattern in the back, and a white "cutout" on top (there are two versions of the latter: for desktop and mobile). Stripping my code down to the very basics, this is what it should look like on devices with a width greater than 740 pixels:

All of my testing on desktop results in the desired effect. But when I bring this to my mobile, a Samsung Galaxy s9, and rotate the device to landscape mode (width >740), the top background image disappears:

To add to this weirdness, something about the length of the content seems to be what breaks the background. If you remove a paragraph, the top background image will display again. I've tested single lines of text and images – it all seems to amount to the length of the page.

My code (see it in JSFiddle) is very basic and has been widely supported for a long time, so is it just a glitch on this specific device? Or is it the act or rotating causing the problem?

body {
  min-height: 100vh;
  background-color: #200047;
  background-image: url(bg_cutout.png), url(background.jpg);
  background-position: center top, left top;
  background-attachment: scroll, fixed;
  background-repeat: repeat-y, repeat;
}

@media screen and (max-width: 740px) {
  body {
    background-image: url(bg_cutout_m.png), url(background.jpg);
    background-position: left top, left top;
  }

  .desktop {
    display: none;
  }
}

I would preferably like to find a pure CSS solution, but I have spent so much time troubleshooting this, that I'd be happy with a JavaScript or jQuery fix as well. Anything that will point me in the right direction would be appreciated.