Yeah, I actually had read some of your previous posts about that before I even wrote my question. They were very helpful. That's the only reason why I knew it had to do with the stacking context, and how I found out that the Layers dev tool even existed in Chrome! I'm just having trouble figuring out the proper fix here because our course code is so complicated. I can try to explain how it works, though it probably won't be all that useful.
Our courses consist of a main UI HTML page that loads individual content HTML pages into an iFrame. The UI HTML controls all the navigation (menu, next and previous buttons, pause/play, etc.), and runs the animation for each loaded content HTML, usually based on the timecode of an audio or video file. Once a content HTML file is loaded and before the animation for that slide begins, each element that will appear in that slide is dynamically created and wrapped in its own div that has display:block and position:absolute. These elements are added to the content HTML file's container div which has position:relative. And the whole course scales to fit the browser, so many of the elements have transforms on them, including the content HTML file's container div.
Here's a screenshot of the layers in a course slide where two background images change behind some text:
The above image shows the layers of an animation where there are two images underneath some text. This is the moment where the second image behind the text is scaling/fading in. The selected layer (that the Details section is describing), the one with the red arrow pointing at it, has the first image and the text composited together. The second image that is coming in is the layer with the blue arrow. The odd thing is, even when I tried animating the text (changed its opacity from 1 to 0.999) at the same time as the second image, it still is composited with the first image.