DOM Element Issue - DIv container positioned offscreen - Chromium Browers - Phaser 3 - 3.55

[amurdoch22]

Good Day

I configured my game for DOM Elements, and the div container that's getting placed is under my canvas, instead of on top of the canvas, only on Chromium based browsers, on Firefox the div is set on top correctly.

Example: (Chromium):

 

Firefox:

 

I found on Chromium - Linux, I can target the overlap with the following selector, but is there a better way to go about this?

body > div:nth-child(12) {
  position: absolute;
  top: 0;
  left: 0;
}

This is my game config:

this.config = {
  type: Phaser.AUTO,
  dom: {
    createContainer: true,
    behindCanvas: true
  },
  scale: {
    mode: Phaser.Scale.FIT,
  },
  height: 940,
  width: 1840,
  scene: [ StartScene,
           IdentificationScene,
           MainScene,
           FinalScene ],
  parent: "gameContainer",
};

Has anyone seen this behavior before?  I'm using Angular 12 with the framework. Is there a better selector that won't require a child selector?

Thanks