Dropdown UI Black Screen Issue on Android in Phaser Game

I’m encountering an issue with a custom dropdown in my Phaser 3 game. The dropdown works perfectly on iOS and web, but on Android (APK), the screen turns black when I attempt to display the dropdown list. The dropdown is created using the DOM and dynamically populated with options. Here’s how I’m adding the dropdown:

 // Create a dropdown using HTML
    const dropdown = document.createElement('select');
    dropdown.style.position = 'absolute';
    dropdown.style.zIndex = '1000';

    const option1 = document.createElement('option');
    option1.value = '1';
    option1.text = 'Option 1';
    dropdown.appendChild(option1);

    const option2 = document.createElement('option');
    option2.value = '2';
    option2.text = 'Option 2';
    dropdown.appendChild(option2);

    document.body.appendChild(dropdown);
    dropdown.addEventListener('change', (event) => {
      const selectedValue = (event.target as HTMLSelectElement).value;
      console.log('Selected Value:', selectedValue);
      if (selectedValue === '1') {
        console.log('Option 1 selected');
      } else if (selectedValue === '2') {
        console.log('Option 2 selected');
      }

my gameconfig looks like below



export class RobotGame extends Phaser.Game {
    constructor() {
        super({
            type: Phaser.AUTO,
            scale: {
                width: Dimensions.designResolution.width,
                height: Dimensions.designResolution.height,
                mode: Phaser.Scale.NONE,
            },
            backgroundColor: "#000000",
            banner: false,
            zoom: 1,
            autoMobilePipeline: true,
            plugins: {
                global: [
    
                ],
                scene: [
                    {
                        key: "rexGestures",
                        plugin: gestures,
                        mapping: "rexGestures",
                    },
                ],
            },
            loader: {
                crossOrigin: "anonymous",
                baseURL: CDN_PATH,
            },
            parent: "DOMElementParent",
            dom: {
                createContainer: true,
            },
            render: {
                transparent: true,
                powerPreference: "high-performance",
                autoMobilePipeline: true,
            },
        });

        this.canvas.className = "game_canvas";

        SafeArea.getSafeAreaInsets().then((safeArea) => {
            this.bootGame(safeArea);
        });
    }

    private bootGame(safeArea: SafeAreaInsets): void {
        const ppi = window.devicePixelRatio;
        Dimensions.safeAreaInsets = {
            top: safeArea.insets.top * ppi,
            right: safeArea.insets.right * ppi,
            bottom: safeArea.insets.bottom * ppi,
            left: safeArea.insets.left * ppi,
        };

        this.scene.add("Boot", new Boot());
        this.scene.start("Boot");
    }
}

using Phaser: 3
Capacitor : 6
@capacitor/android": “^6.0.0”

screenShot of dropdown looks like below

I suspect it might be related to DOM element rendering . Any ideas or suggestions on debugging or fixing this?