Problem loading a texture on Firefox or Android

Recommended Posts

I'm having an odd problem loading a texture on Firefox for Android. It seems to work on every other browser I've tested. Here's a url with an example of the problem:  https://durrantlab.bio.pitt.edu/tmp/minimal_test_firefox_mobile_prob/

Here's the complete html code of that example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="manifest" href="./manifest.json">
            html, body, #renderCanvas {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;

            #renderCanvas {
                /* width: 100%;
                height: 100%; */
                touch-action: none;

        <canvas id="renderCanvas" touch-action="none"></canvas>

        <script src="js/babylon.max.js"></script>

            // Basic setup
            var canvas = document.getElementById("renderCanvas");
            var engine = new BABYLON.Engine(canvas, true);
            var scene = new BABYLON.Scene(engine);
            var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, -10), scene);

            // Make a material
            var material = new BABYLON.StandardMaterial("mat", scene);
            material.diffuseColor = new BABYLON.Color3(0, 0, 0);
            material.specularColor = new BABYLON.Color3(0, 0, 0);
            material.diffuseTexture = null;
            material.emissiveTexture = new BABYLON.Texture("skybox.png", scene);

            // Make a box with that material
            var box = BABYLON.Mesh.CreateBox("box", 2, scene);
            box.rotation.x = -0.2;
            box.rotation.y = -0.4;
            box.material = material;

            // Resize the engine
            // Start the render loop
            engine.runRenderLoop(() => { 

            // Watch for browser/canvas resize events
            window.addEventListener("resize", () => {


This is what it looks like in most browsers (in this case Chrome for Android):


But here is Firefox for Android:


Has anyone else encountered this problem? Any suggestions re. how to fix it? Thanks!

Share this post

Link to post
Share on other sites

Hi all. I fixed the "engie" error and changed to the full url: 


The error persists in Firefox on Android, though. Here's an updated version of the code that still causes the same error: https://durrantlab.bio.pitt.edu/tmp/minimal_test_firefox_mobile_prob2/



Share this post

Link to post
Share on other sites

Hi all. I reloaded in private browsing, but I still had the same problem. I asked some of my students to test it on their phones, and it worked fine for them. So strange that I can't reproduce this problem on anyone else's phone. Makes debugging very difficult! Thanks for your help just the same. All the best.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.