This one is driving me crazy. My javascript code works for most slides in a deck I create but sometimes it messes up. It usually takes one of four forms:

1. the slide will appear as a tiny picture under a logo I put on the slide when the slide isn't wide enough to fill the viewing area, or
2. the slide will appear properly sized but under the logo which now occupies the full height of the viewing area, or
3. both of the above, or
4. neither the slide nor the logo appear. Instead the previous slide continues to be shown.

My code isn't all that complicated. The part that shows the individual slide is below:

var backgroundImage;
var imgHeight;
var imgWidth;

function waitForHeight() {
    sleep(120).then(() => {
        if (imgHeight == 0) {
            waitForHeight()
        } else {
            setBackground();
        }
    }); 
}

function getSizes() {
    imgHeight = this.height;
    imgWidth  = this.width;
    return true;
}

function showImage(imgPath) {
    var myImage    = new Image();
    myImage.name   = imgPath;
    myImage.onload = getSizes;
    myImage.src    = imgPath;
    return myImage;
}

function setBackground() {
    var backgroundPosition  = "";
    var backgroundSize      = "100%";
    var aspectRatio         = imgHeight / imgWidth;
    if (aspectRatio > 0.70) {
        backgroundSize     = "10vw, auto 100%";
        backgroundImage    = "URL(images/LCI_emblem_2color.png), " + backgroundImage;
        backgroundPosition = "top 1rem left 1rem, top right";
    }
    var mainPanel   = document.getElementById("mainpanel")
    mainPanel.style.backgroundImage    = backgroundImage;
    mainPanel.style.backgroundPosition = backgroundPosition;
    mainPanel.style.backgroundSize     = backgroundSize;
}

function addPic(curCell, curSlide, nodeNum) {
    imgHeight = 0;  // flag that height not set yet
    var curImg = showImage(curSlide.childNodes[nodeNum].firstChild.nodeValue);
    curImg.setAttribute('class', 'd-none d-md-block');
    curCell.appendChild(curImg);
    backgroundImage = "URL(" + getSlidePicture(curSlide) + ")";
    waitForHeight();
}

The code, as I said, is not complicated. I can understand somewhat what the problem is - either the picture doesn't load or it gets put into the wrong "background" area, but I don't get why it happens.

I've noted the issue occurs with the same slides in both Chromium and Firefox and has survived multiple versions of each browser, so it's probably not a browser issue.

Any ideas?