Fixing pointerEvents issue with debugLayer

Babylon/Debug/babylon.debugLayer.js

@@ -289,10 +289,9 @@
             this._enabled = false;
 
             var engine = this._scene.getEngine();
-            var parentElement = engine.getRenderingCanvas().parentElement;
 
             this._scene.unregisterAfterRender(this._syncData);
-            parentElement.removeChild(this._globalDiv);
+            document.body.removeChild(this._globalDiv);
 
             window.removeEventListener("resize", this._syncPositions);
 
@@ -447,8 +446,6 @@
             var _this = this;
             this._globalDiv.id = "DebugLayer";
 
-            this._globalDiv.style.position = "absolute";
-
             // Drawing canvas
             this._drawingCanvas = document.createElement("canvas");
             this._drawingCanvas.id = "DebugLayerDrawingCanvas";
@@ -644,6 +641,8 @@
                 });
 
                 // Global
+                this._globalDiv.style.position = "absolute";
+                this._globalDiv.style.pointerEvents = "none";
                 this._globalDiv.appendChild(this._statsDiv);
                 this._globalDiv.appendChild(this._logDiv);
                 this._globalDiv.appendChild(this._optionsDiv);

Babylon/Debug/babylon.debugLayer.ts

@@ -321,10 +321,9 @@
             this._enabled = false;
 
             var engine = this._scene.getEngine();
-            var parentElement = engine.getRenderingCanvas().parentElement;
 
             this._scene.unregisterAfterRender(this._syncData);
-            parentElement.removeChild(this._globalDiv);
+            document.body.removeChild(this._globalDiv);
 
             window.removeEventListener("resize", this._syncPositions);
 
@@ -474,8 +473,6 @@
         private _generateDOMelements(): void {
             this._globalDiv.id = "DebugLayer";
 
-            this._globalDiv.style.position = "absolute";
-
             // Drawing canvas
             this._drawingCanvas = document.createElement("canvas");
             this._drawingCanvas.id = "DebugLayerDrawingCanvas";
@@ -626,6 +623,9 @@
                 this._generateCheckBox(this._optionsSubsetDiv, "Textures", this._scene.texturesEnabled, (element) => { this._scene.texturesEnabled = element.checked });
 
                 // Global
+
+                this._globalDiv.style.position = "absolute";
+                this._globalDiv.style.pointerEvents = "none";
                 this._globalDiv.appendChild(this._statsDiv);
                 this._globalDiv.appendChild(this._logDiv);
                 this._globalDiv.appendChild(this._optionsDiv);

babylon.2.0-alpha.debug.js

@@ -29602,10 +29602,9 @@ var BABYLON;
             this._enabled = false;
 
             var engine = this._scene.getEngine();
-            var parentElement = engine.getRenderingCanvas().parentElement;
 
             this._scene.unregisterAfterRender(this._syncData);
-            parentElement.removeChild(this._globalDiv);
+            document.body.removeChild(this._globalDiv);
 
             window.removeEventListener("resize", this._syncPositions);
 
@@ -29760,8 +29759,6 @@ var BABYLON;
             var _this = this;
             this._globalDiv.id = "DebugLayer";
 
-            this._globalDiv.style.position = "absolute";
-
            
             this._drawingCanvas = document.createElement("canvas");
             this._drawingCanvas.id = "DebugLayerDrawingCanvas";
@@ -29957,6 +29954,8 @@ var BABYLON;
                 });
 
                
+                this._globalDiv.style.position = "absolute";
+                this._globalDiv.style.pointerEvents = "none";
                 this._globalDiv.appendChild(this._statsDiv);
                 this._globalDiv.appendChild(this._logDiv);
                 this._globalDiv.appendChild(this._optionsDiv);