Element won't load in puppeteer chromium, but does in firefox nightly - puppeteer

Question

In a front heavy webpage, a div element won't load for puppeteer's chromium no matter how long I wait, but will in Firefox Nightly.
Said element loads in two phases that I can tell. First it loads the wrapper, and the interior content shows "loading...". After a beat, it should load its content. However, when using standard puppeteer, it hangs at "loading..."
Partially loaded:
<div class="WavePlayer"><div class="jss20 jss22"><div class="MuiCircularProgress-root MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate" role="progressbar" style="width: 20px; height: 20px; color: rgb(0, 90, 80);"><svg class="MuiCircularProgress-svg" viewBox="22 22 44 44"><circle class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate" cx="44" cy="44" r="20.2" fill="none" stroke-width="3.6"></circle></svg></div><span class="jss21">Loading audio...</span></div><div class="WavePlayer__wavewrap loading"><wave style="display: block; position: relative; user-select: none; height: 128px; width: 100%; overflow: auto hidden;"><wave style="position: absolute; z-index: 3; left: 0px; top: 0px; bottom: 0px; overflow: hidden; width: 0px; display: none; box-sizing: border-box; border-right: 1px solid transparent; pointer-events: none;"><canvas style="position: absolute; left: 0px; top: 0px; bottom: 0px; height: 100%;"></canvas></wave><canvas style="position: absolute; z-index: 2; left: 0px; top: 0px; bottom: 0px; height: 100%; pointer-events: none;"></canvas></wave></div></div>
Fully loaded:
<div class="WavePlayer">
<div class="WavePlayer__wavewrap">
<wave style="display: block; position: relative; user-select: none; height: 128px; overflow: auto hidden;">
<wave style="position: absolute; z-index: 3; left: 0px; top: 0px; bottom: 0px; overflow: hidden; width: 0px; display: block; box-sizing: border-box; border-right: 1px solid transparent; pointer-events: none;">
<canvas style="position: absolute; left: 0px; top: 0px; bottom: 0px; height: 100%; width: 806px;" width="806" height="128">
</canvas>
</wave>
<canvas style="position: absolute; z-index: 2; left: 0px; top: 0px; bottom: 0px; height: 100%; pointer-events: none; width: 806px;" width="806" height="128">
</canvas>
</wave>
</div>
<div>
Either I use a wait for selection like
await page2.waitForSelector('div[class="WavePlayer__highlight"]');
(there's a bunch of WavePlayer__highlight elements when it's fully loaded that I didn't bother copying)
Or a manual delay like
delay(10000)
which is defined as
function delay(time) {
return new Promise(function(resolve) {
setTimeout(resolve, time)
});
}
However, I feel either line is not too relevant because the issue happens regardless of code, since it's about the webpage itself not loading an element even when debugging, but again, it does load in Firefox. Putting a waitForNavigation right after going to this url will not wait for the WavePlayer element to fully load. Neither does using await page.goto(URL_VIDEO, {waitUntil: 'networkidle2', timeout: 0});
I am guessing WavePlayer is a premade tool made with Web Audio API and HTML5 canvas. I could find a few WavePlayers googling around, but I don't know which one is the exact one.
I'm obviously able to screencap it because I'm launching puppeteer with headless=false. However, the same timeout happens at the same spot in headless mode. Given it loads in puppeteer's firefox, I would happily go with it, but other basic commands I use break with firefox. I assume it's because it's still an experimental build, and not puppeteer's core mission anyway.
The element loads correctly under desktop Firefox, Chrome, Chromium and Brave under Ubuntu 22.04.1 LTS. I cannot share the webpage URL since it's a paid online service. For those curious, it's amberscript.com