Globe: Fix bottom when cut

src/globe/index.js

@@ -60,6 +60,7 @@ class WebglGlobe {
 
     // Build
     buildWebglScene () {
+        // Renderer
         this.renderer = new Renderer({
             // To allow transparent background on webgl canvas
             alpha: true,
@@ -67,6 +68,8 @@ class WebglGlobe {
             antialias: window.innerWidth < 768 || window.devicePixelRatio == 1 ? true : false,
         })
 
+        const elParent = document.body
+
         // we put the canvas at the end of body tag as 'position:fixed'
         // this is to avoid having a too big canvas if the globe needs to be very large:
         // so instead we move the globe as we scroll
@@ -75,7 +78,7 @@ class WebglGlobe {
         this.renderer.canvas.style.left = 0
         this.renderer.canvas.style.pointerEvents = 'none'
         this.renderer.canvas.style.zIndex = 100
-        document.body.appendChild(this.renderer.canvas)
+        elParent.appendChild(this.renderer.canvas)
 
         // The markers DOM nodes wrapper
         // this wrapper is added just next to the canvas, at the end of body tag
@@ -85,8 +88,7 @@ class WebglGlobe {
         this.$markerWrapper.style.top  = 0
         this.$markerWrapper.style.left = 0
         this.$markerWrapper.style.pointerEvents = 'none'
-        this.$markerWrapper.style.zIndex = 101
-        document.body.appendChild(this.$markerWrapper)
+        elParent.appendChild(this.$markerWrapper)
 
         // Load worldmap texture
         this.texture = Texture.fromUrl(this.renderer.gl, this.options.texture, {
@@ -281,11 +283,11 @@ class WebglGlobe {
     }
 
     // Destroy
-    destroy() {
-        this.disable()//stop render loop
-        document.body.removeChild(this.$markerWrapper )
-        document.body.removeChild(this.renderer.canvas )
-        this.camera.delete()//to remove event listeners
+    destroy () {
+        this.disable() // Stop render loop
+        document.body.removeChild(this.$markerWrapper)
+        document.body.removeChild(this.renderer.canvas)
+        this.camera.delete() // To remove event listeners
     }
 
     /**
@@ -311,7 +313,7 @@ class WebglGlobe {
         }
 
         if (this.globeMesh.material.uniforms.uCameraOffsetY) {
-            this.globeMesh.material.uniforms.uCameraOffsetY.value += (this.globeScrollOffset - this.globeMesh.material.uniforms.uCameraOffsetY.value ) * this.options.scrollSmoothing
+            this.globeMesh.material.uniforms.uCameraOffsetY.value += (this.globeScrollOffset - this.globeMesh.material.uniforms.uCameraOffsetY.value) * this.options.scrollSmoothing
         }
 
         this.currMarkerScrollOffset += (this.markersScrollOffset - this.currMarkerScrollOffset) * this.options.scrollSmoothing