Проблема с черным экраном выпадающего пользовательского интерфейса на Android в игре Phaser ⇐ Android

[Anonymous]

У меня возникла проблема с пользовательским раскрывающимся списком в моей игре Phaser 3. Раскрывающийся список отлично работает на iOS и в Интернете, но на Android (APK) экран становится черным, когда я пытаюсь отобразить раскрывающийся список. Раскрывающийся список создается с использованием DOM и динамически заполняется опциями. Вот как я добавляю раскрывающийся список:

Код: Выделить всё

// 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');
}

моя конфигурация игры выглядит так, как показано ниже

Код: Выделить всё

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");
}

• с использованием Phaser: 3
• Конденсатор: 6
• @capacitor/ android": "^6.0.0"

Снимок экрана раскрывающегося списка выглядит так, как показано ниже


Я подозреваю, что это может быть связано с рендерингом элементов DOM на Android. Любые идеи или предложения по отладке или. это исправить?

Подробнее здесь: https://stackoverflow.com/questions/792 ... haser-game