I am facing an issue with my webpage that has a full-screen canvas. I plan to overlay divs on the canvas to hold UI elements using jQuery for styling and positioning. However, Firefox seems to reject any CSS changes made by JavaScript, especially when there is any content inside the div.
Here are some technical details:
The div in question acts as a dim screen over the canvas to draw attention to dialogs opened by the user.
The CSS styles used are as follows:
.ui_layer {
position: absolute;
top:0px;
left:0px;
}
#ui_layer_dim {
background-color: #000000;
opacity: 0.5;
}
In JavaScript, I am creating the div dynamically with jQuery like this:
$("<div id='ui_layer_dim' class='ui_layer' style='z-index:1'/>");
Upon window resizing, I adjust the width and height of the div:
gameUI.layers["ui_layer_dim"].onWindowResize = function() {
this.css("width", window.innerWidth + "px");
this.css("height", window.innerHeight + "px");
};
While this function works perfectly in Chrome, Firefox fails to resize the div if there is any content inside it. I have tried different approaches and checked the HTML structure but couldn't find a solution.
If anyone has encountered a similar problem or knows of a workaround, your help would be highly appreciated!