Phaser encountering a null window.computedStyle() error in Firefox (while dealing with a hidden Iframe)

I'm experiencing issues with Phaser game-engine games crashing specifically in Firefox. The error that keeps popping up is related to a hidden iframe containing the game, which is hidden due to a pre-game video ad being displayed.

I keep getting a Type Error "window.computedStyle() is null."

Has anyone found any workarounds for this issue?

Answer №1

It appears there may have been a typo in your code. The correct syntax is actually "window.getComputedStyle()".

Here is a suggested code snippet that you can try:

if (/firefox/i.test(navigator.userAgent)){
   window.oldGetComputedStyle = window.getComputedStyle;
   window.getComputedStyle = function (element, pseudoElt) {
      var result = window.oldGetComputedStyle(element, pseudoElt);
      if (result === null) {
         return {
            getPropertyValue: function(){}
         };
      } else{
         return result;
      }
   };
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for utilizing ui-sref in a complex Angular UI router configuration

After spending hours researching and implementing different techniques, I am still unable to solve the issue. My application consists of three main navigations: home, sports, and country. <head> <script src="js/angular-ui-router.min.js"></s ...

Implementing a Custom HTML Attribute to the Script Tag in Vue JS

I have decided to switch from using Google Analytics to Plausible analytics for my website. However, I am encountering an issue with adding the Plausible script to the head of my Nuxt JS document. I have created a custom plugin to handle this, but the Vue ...

I need to find a way to properly test a recursive, async JavaScript function by utilizing fake timers

I've been working with a basic recursive function that performs as expected when run. To thoroughly test its operation at each stage, I want to utilize Sinon's fake timers. Unfortunately, it seems that the fake timers are only affecting the init ...

Troublesome button appearance

I set up two sections to gather user information using buttons. My goal is for the button styles to change when clicked, making it clear to users which option they have selected, even if they switch between sections. However, I encountered an issue where ...

What is preventing ColladaLoader.js in Three.js from loading my file?

Recently, I decided to experiment with three.js and wanted to load a .dae file called Raptor.dae that I obtained from Ark Survival Evolved. Despite having some web development knowledge, I encountered an issue when trying to display this particular file in ...

I need to show a DIV element when a specific anchor is in an active state within an HTML document

Is there a way to make the code below only visible when the url ends with #404? <!--404 code--> <style> .div1 { width: 300px; height: 100px; border: 1px solid blue; border-color: #ff0263; box-sizing: border-box; } < ...

The Angular Google Maps Module fails to initialize

After updating angular-google-maps to version 2.0.1 via bower and adding the required dependencies (bluebird, jquery, loadash), I noticed that my app works fine when I comment out google-maps. This suggests that the issue lies with angular-google-maps. He ...

Oh no! It seems like the build script is missing in the NPM

https://i.stack.imgur.com/el7zM.jpg npm ERR! missing script: build; I find it strange, what could be causing this issue? Any suggestions? I have included the fullstack error with the package.json. Please also review the build.sh code below. Fullstack err ...

Could an element's loading be postponed on the initial page a user lands on?

One of my clients has requested a live chat system to be added to their website. I am fully capable of implementing it, and it is included through a script tag. Additionally, they have asked for a slight delay before the chat system loads in. My initial t ...

Determine the absolute path with respect to a different reference path, rather than the current working directory

One of the challenges I'm facing with my Node.js module is how to easily allow developers to edit the location of the dependencies relative to the module file itself. The issue arises because the current working directory, accessed through `process.cw ...

Download a complete website using PHP or HTML and save it for offline access

Is there a way to create a website with a textbox and save button, where entering a link saves the entire website like the 'save page' feature in Google Chrome? Can this be done using PHP or HTML? And is it possible to zip the site before downloa ...

sudden swivel when shifting camera while following an object on a flat surface/pathway

I'm relatively new to three.js and I'm eager to create a scenario where a cube or object moves on a flat surface or road. I have managed to move the object in the z direction, but now I want to move the camera as well, giving the impression of a ...

JavaScript powered simple window

I am currently working on a basic modal that will open and display content. Unfortunately, I cannot add images to help illustrate the design, so I'll do my best to describe it in detail. The modal is linked to an image slider where the heading change ...

Confirm that the input into the text box consists of three-digit numbers separated by commas

Customers keep entering 5 digit zip codes instead of 3 digit area codes in the telephone area code textbox on my registration form. I need a jQuery or JavaScript function to validate that the entry is in ###,###,###,### format without any limit. Any sugge ...

Unable to append item to document object model

Within my component, I have a snippet of code: isLoaded($event) { console.log($event); this.visible = $event; console.log(this.visible); this.onClick(); } onClick() { this.listImage = this.imageService.getImage(); let span = docu ...

Using JavaScript (without jQuery), take away the CSS class from an element

Seeking assistance from experts on the process of removing a class from an element solely using JavaScript. Kindly refrain from suggesting solutions involving jQuery as I am unable to utilize it, and have little knowledge about its functionalities. ...

issue with bootstrap modals single firing when using remote data source

I am facing an issue with my table that contains a list of items, each item having a <select> element with different statuses. Here's how the process is supposed to work: Upon changing the status, a modal should pop up. The modal suc ...

Password validation with Mongoose customization

I'm working on creating a Schema using mongoose, but I'm facing some challenges when it comes to implementing custom validation for the password. The password should meet the following criteria: It must contain at least one special character ...

Is there a way to use jQuery to zoom in and out a specific area of the screen as the mouse moves?

I need help with implementing a zoom in effect for my images. I have two 'Div's stacked on top of each other, each containing a canvas with draggable and droppable images. I want the images to zoom in when the mouse hovers over them and zoom out ...

Sentry: Easily upload source maps from a nested directory structure

I am currently developing a NextJs/ReactJs application using Typescript and I am facing an issue with uploading sourcemaps to Sentry artefacts. Unlike traditional builds, the output folder structure of this app mirrors the NextJs pages structure, creating ...