Explorar el Código

better synchronized scrolling

moving the canvas each frame inside rAF
means the browser will scroll the canvas with
the rest of the page even if we don't get
a chance to update it. This removes the
bounce that was there before where our
canvas update was behind the page update.
Gregg Tavares hace 7 años
padre
commit
8abb7c805d
Se han modificado 1 ficheros con 7 adiciones y 5 borrados
  1. 7 5
      examples/webgl_multiple_elements.html

+ 7 - 5
examples/webgl_multiple_elements.html

@@ -16,19 +16,19 @@
 				font-size:13px;
 
 				background-color: #fff;
-				margin: 0px;
+				margin: 0;
 			}
 
 			#info {
 				position: absolute;
-				top: 0px; width: 100%;
+				top: 0; width: 100%;
 				padding: 5px;
 				text-align:center;
 			}
 
 			#content {
 				position: absolute;
-				top: 0px; width: 100%;
+				top: 0; width: 100%;
 				z-index: 1;
 				padding: 3em 0 0 0;
 			}
@@ -38,8 +38,8 @@
 			}
 
 			#c {
-				position: fixed;
-				left: 0px;
+				position: absolute;
+				left: 0;
 				width: 100%;
 				height: 100%;
 			}
@@ -187,6 +187,8 @@
 
 				updateSize();
 
+				canvas.style.transform = `translateY(${window.scrollY}px)`;
+
 				renderer.setClearColor( 0xffffff );
 				renderer.setScissorTest( false );
 				renderer.clear();