Firefox ns error failure on i.prototype.drawText

[snupas]

Was just trying to draw some axis for transformations based on some already working code on the forums/playground and I keept getting errors in Firefox that points to the i.prototype.drawText function in the babylon js library.

Here's the error:

Here's the source:

       var showAxis = function (size) {

          var makeTextPlane = function (text, color, size) {
            var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);
            dynamicTexture.hasAlpha = true;
            dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color, "transparent", true);
            var plane = new BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);
            plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);
            plane.material.backFaceCulling = false;
            plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
            plane.material.diffuseTexture = dynamicTexture;
            return plane;
          };

          var axisX = BABYLON.Mesh.CreateLines("axisX", [
            new BABYLON.Vector3.Zero(), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size, 0),
            new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)
          ], scene);
          axisX.color = new BABYLON.Color3(0, 0, 1);
          axisX.position.z += 20;
          axisX.position.y -= 4;
          axisX.position.x -= 40;
          var xChar = makeTextPlane("X", "red", size / 10);
          xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);
          var axisY = BABYLON.Mesh.CreateLines("axisY", [
            new BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(-0.05 * size, size * 0.95, 0),
            new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3(0.05 * size, size * 0.95, 0)
          ], scene);
          axisY.position.z = 34
          axisY.position.y = -20;
          axisY.position.x += offset;
          axisY.color = new BABYLON.Color3(0, 0, 1);
          var yChar = makeTextPlane("Y", "green", size / 10);
          yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);
        };

 I tried both preview and stable versions of babylon.js, both with the majority of components included.

[GameMonetize]

Can you repro on the Playground?

[Wingnut]

Hi guys.  I will help with PG...

https://www.babylonjs-playground.com/#1INESU#1

Snupas... I removed positioning lines 46-48, and lines 55-57.  I also added line 26, but it is not needed, because line 57 is disabled.

After those changes, it started looking better... so I thought I would show it.    I hope this helps you guys.

[snupas]

Thanks for the input,

But apparently the bug is more so related to the canvas element being inside of a hidden iframe.

So the parent element of the iframe that has the babylon js document is hidden initially, so certain canvas functions you can't perform in Firefox on such an element.

In my case it's a bootstrap modal, so I can't use the opacity:0 workaround instead of having it hidden...

In case anyone else stumbles upon this:

https://bugzilla.mozilla.org/show_bug.cgi?id=941146

[snupas]

Solution was to show the bootstrap modal on page load with 0 opacity and z-index of -2 and allow everything to load up while being invisible on the web page and not obstructing anything.

Then when I need to prepare to show it, I hide the modal, set back opacity to 1 and z-index to bootstrap modal default of 1050.

$('#myModal').modal('toggle');
$("#myModal").css({
             opacity: 0,
	    'z-index': -2,
	});

$('#myModal').modal('toggle');
$("#myModal").css({
	    opacity: 1,
	    'z-index': 1050,
	});

Not really a babylon.js library related bug, but someone that's using babylon.js in an iframe situation could end up in the same situation.