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?