Fixed stats widget appearance issues that appeared with recent Chrome updates.

Unfortunately performance issues are still there and now already trickled down also to dev channel :(

I wonder what they did - fps numbers look more or less ok, problem is more with subtle yet very annoying choppiness. Like if somewhere suddenly bandwidth / memory is getting trashed.

examples/geometry_large_mesh.html

@@ -15,7 +15,7 @@
 			}
 			h1 { }
 			a { color:skyblue }
-			canvas { pointer-events:none; z-index:10; position:relative; }
+			canvas { pointer-events:none; z-index:10; }
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
 			#d { text-align:center; margin:1em 0 -18em 0; z-index:0; position:relative; display:block }
 			.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
@@ -153,6 +153,7 @@
 					try {
 						webglRenderer = new THREE.WebGLRenderer();
 						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+						webglRenderer.domElement.style.position = "relative";
 						container.appendChild( webglRenderer.domElement );
 						has_gl = 1;
 					}

examples/lights_test.html

@@ -15,7 +15,7 @@
 			}
 			h1 { }
 			a { color:skyblue }
-			canvas { pointer-events:none; z-index:10; position:relative; }
+			canvas { pointer-events:none; z-index:10; }
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100; }
 			#d { text-align:center; margin:1em 0 -15.7em 0; z-index:0; position:relative; display:block }
 			.button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
@@ -148,8 +148,9 @@
 
 					try {
 
-						webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
+						webglRenderer = new THREE.WebGLRenderer();
 						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+						webglRenderer.domElement.style.position = "relative";
 						container.appendChild( webglRenderer.domElement );
 
 						has_gl = 1;

examples/materials_cubemap.html

@@ -16,7 +16,7 @@
 			a {	color: #ff0080;	text-decoration: none; }
 			a:hover { color: #0080ff; }
 
-			canvas { pointer-events:none; z-index:10; position:relative; }
+			canvas { pointer-events:none; z-index:10; }
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
 			#d { text-align:center; margin:1em 0 -7.5em 0; z-index:1000; position:relative; display:block }
 			.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }

examples/materials_cubemap_refraction.html

@@ -16,7 +16,7 @@
 			a {	color: #ff0080;	text-decoration: none; }
 			a:hover { color: #0080ff; }
 
-			canvas { pointer-events:none; z-index:10; position:relative; }
+			canvas { pointer-events:none; z-index:10; }
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100; pointer-events:none; }
 			#d { text-align:center; margin:1em auto -9.5em; z-index:200; position:relative; display:block; 
 				background:rgba(0,0,0,0.5); padding:0.5em; width:400px; border-radius:15px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5) }

examples/materials_multimaterials.html

@@ -14,7 +14,7 @@
 			}
 			h1 { }
 			a { color:skyblue }
-			canvas { pointer-events:none; z-index:10; position:relative; }
+			canvas { pointer-events:none; z-index:10; }
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:1; pointer-events:none; }
 			#d { text-align:center; margin:1em 0 -15.7em 0; z-index:0; position:relative; display:block }
 			.button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
@@ -148,6 +148,7 @@
 					try {
 						webglRenderer = new THREE.WebGLRenderer();
 						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+						webglRenderer.domElement.style.position = "relative";
 						container.appendChild( webglRenderer.domElement );
 						has_gl = 1;
 					}

examples/materials_shaders.html

@@ -15,7 +15,7 @@
 			}
 			h1 { }
 			a { color:skyblue }
-			canvas { pointer-events:none; z-index:10; position:relative; }
+			canvas { pointer-events:none; z-index:10; }
 			#log { position:absolute; top:50px; text-align:left; display:block; z-index:100 }
 			#d { text-align:center; margin:1em 0 -19.7em 0; z-index:0; position:relative; display:block }
 			.button { background:orange; color:#fff; padding:0.2em 0.5em; cursor:pointer }
@@ -121,7 +121,7 @@
 				var ambient = new THREE.AmbientLight( 0x101010 );
 				scene.addLight( ambient );
 
-				directionalLight = new THREE.DirectionalLight( 0xffffff, 1.0 );
+				directionalLight = new THREE.DirectionalLight( 0xffffff );
 				directionalLight.position.x = 1;
 				directionalLight.position.y = 1;
 				directionalLight.position.z = 2;
@@ -135,7 +135,7 @@
 				scene.addLight( pointLight );
 
 				// light representation
-				sphere = new Sphere( 100, 16, 8, 1 );
+				sphere = new Sphere( 100, 16, 8 );
 				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
 				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
 				lightMesh.position = pointLight.position;
@@ -144,7 +144,7 @@
 				scene.addObject(lightMesh);
 
 				// material samples
-				sphere = new Sphere( 100, 32, 32, 1 );
+				sphere = new Sphere( 100, 32, 32 );
 
 				var y1 = 0, y2 = -200;
 				
@@ -173,6 +173,7 @@
 					try {
 						webglRenderer = new THREE.WebGLRenderer();
 						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+						webglRenderer.domElement.style.position = "relative";
 						container.appendChild( webglRenderer.domElement );
 						has_gl = 1;
 					}

examples/obj_convert_test.html

@@ -14,7 +14,7 @@
 			}
 			h1 { }
 			a { color:skyblue }
-			canvas { pointer-events:none; z-index:10; position:relative; }
+			canvas { pointer-events:none; z-index:10; }
 			#log { position:absolute; top:0; display:block; text-align:left; z-index:1000; pointer-events:none; }
 			#d { text-align:center; margin:1em 0 -15.7em 0; z-index:0; position:relative; display:block }
 			.button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
@@ -171,6 +171,7 @@
 						webglRenderer = new THREE.WebGLRenderer();
 						webglRenderer.setFaceCulling(0);
 						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+						webglRenderer.domElement.style.position = "relative";
 						container.appendChild( webglRenderer.domElement );
 						has_gl = 1;
 					}