use width, height 100%

threejs/3dlut-base-cube-maker.html

@@ -10,7 +10,7 @@ canvas {
   image-rendering: pixelated;
 }
 #cube {
-  max-width: calc(100vw - 20px);
+  max-width: calc(100% - 20px);
   overflow: auto;
 }
 </style>

threejs/gpw-data-viewer.html

@@ -5,7 +5,7 @@
 <title>gpw data viewer</title>
 <style>
 canvas {
-  max-width: calc(100vw - 16px);
+  max-width: calc(100% - 16px);
 }
 </style>
 </head>

threejs/lessons/ja/threejs-tips.md

@@ -289,8 +289,8 @@ body {
     margin: 0;
 }
 #c {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     display: block;
 +    position: fixed;
 +    left: 0;
@@ -302,8 +302,8 @@ body {
 +  font-size: 7vw;
 +  font-family: sans-serif;
 +  text-align: center;
-+  width: 100vw;
-+  height: 100vh;
++  width: 100%;
++  height: 100%;
 +  display: flex;
 +  justify-content: center;
 +  align-items: center;
@@ -358,8 +358,8 @@ body {
 ```
 #background {
     position: fixed;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     left: 0;
     top: 0;
     z-index: -1;

threejs/lessons/kr/threejs-align-html-elements-to-3d.md

@@ -52,16 +52,16 @@ controls.update();
 
 ```css
 #c {
--    width: 100vw;
--    height: 100vh;
+-    width: 100%;
+-    height: 100%;
 +    width: 100%;  /* id=container가 사이즈를 결정하도록 합니다. */
 +    height: 100%;
     display: block;
 }
 +#container {
 +  position: relative;  /* 자식이 이 요소를 기준 삼도록 합니다. */
-+  width: 100vw;
-+  height: 100vh;
++  width: 100%;
++  height: 100%;
 +  overflow: hidden;
 +}
 +#labels {

threejs/lessons/kr/threejs-backgrounds.md

@@ -15,8 +15,8 @@ body {
     margin: 0;
 }
 #c {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     display: block;
 +    background: url(resources/images/daikanyama.jpg) no-repeat center center;
 +    background-size: cover;

threejs/lessons/kr/threejs-multiple-scenes.md

@@ -54,8 +54,8 @@ TOC: 다중 캔버스, 다중 장면 만들기
   position: fixed;
   left: 0;
   top: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   display: block;
   z-index: -1;
 }
@@ -576,8 +576,8 @@ CSS도 바꿔줍니다.
 -  position: absolute;
 -  left: 0;
 -  top: 0;
--  width: 100vw;
--  height: 100vh;
+-  width: 100%;
+-  height: 100%;
 -  display: block;
 -  z-index: -1;
 -}

threejs/lessons/kr/threejs-offscreencanvas.md

@@ -175,8 +175,8 @@ worker.postMessage({ type: 'main', canvas: offscreen }, [ offscreen ]);
 ```css
 #noOffscreenCanvas {
     display: flex;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     align-items: center;
     justify-content: center;
     background: red;
@@ -308,8 +308,8 @@ self.onmessage = function(e) {
 ```css
 -#noOffscreenCanvas {
 -    display: flex;
--    width: 100vw;
--    height: 100vh;
+-    width: 100%;
+-    height: 100%;
 -    align-items: center;
 -    justify-content: center;
 -    background: red;

threejs/lessons/kr/threejs-tips.md

@@ -280,8 +280,8 @@ body {
     margin: 0;
 }
 #c {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     display: block;
 +    position: fixed;
 +    left: 0;
@@ -293,8 +293,8 @@ body {
 +  font-size: 7vw;
 +  font-family: sans-serif;
 +  text-align: center;
-+  width: 100vw;
-+  height: 100vh;
++  width: 100%;
++  height: 100%;
 +  display: flex;
 +  justify-content: center;
 +  align-items: center;
@@ -348,8 +348,8 @@ body {
 ```css
 #background {
     position: fixed;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     left: 0;
     top: 0;
     z-index: -1;

threejs/lessons/kr/threejs-voxel-geometry.md

@@ -842,8 +842,8 @@ body {
     margin: 0;
 }
 #c {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     display: block;
 }
 +#ui {

threejs/lessons/resources/index.css

@@ -8,7 +8,7 @@ body {
 iframe.background {
     position: fixed;
     width: 100%;
-    height: 100vh;
+    height: 100%;
     border: none;
     top: 0;
     z-index: -1000;

threejs/lessons/resources/lesson.css

@@ -85,7 +85,7 @@ div[data-diagram] {
   top: 0;
   left: 0;
   width: 100%;
-  height: 100vh;
+  height: 100%;
   z-index: -100;
 }
 .border {
@@ -206,8 +206,8 @@ div[data-diagram] {
     position: fixed !important;
     left: 0;
     top: 0;
-    width: 100vw !important;
-    height: 100vh !important;
+    width: 100% !important;
+    height: 100% !important;
     z-index: 100;
 }
 .lesson-main>blockquote {
@@ -334,7 +334,7 @@ iframe {
 }
 
 iframe.body {
-  height: 100vh;
+  height: 100%;
 }
 iframe.threejs_example, iframe.threejs_diagram {
   border: none;

threejs/lessons/resources/moon-orbit.html

@@ -9,8 +9,8 @@ body {
   background: white;
 }
 canvas {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   display: block;
 }
 p {

threejs/lessons/resources/threejs-align-html-elements-to-3d.js

@@ -139,7 +139,7 @@ import {GUI} from '../../../3rdparty/dat.gui.module.js';
         };
 
         const darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
-        darkMatcher.addListener(render);
+        darkMatcher.addEventListener('change', render);
 
         function render() {
           const {rotation} = settings;

threejs/lessons/ru/threejs-multiple-scenes.md

@@ -59,8 +59,8 @@ TOC: Несколько холстов, несколько сцен
   position: fixed;
   left: 0;
   top: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   display: block;
   z-index: -1;
 }

threejs/lessons/ru/threejs-offscreencanvas.md

@@ -201,8 +201,8 @@ worker.postMessage({type: 'main', canvas: offscreen}, [offscreen]);
 ```css
 #noOffscreenCanvas {
     display: flex;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     align-items: center;
     justify-content: center;
     background: red;
@@ -345,8 +345,8 @@ self.onmessage = function(e) {
 ```css
 -#noOffscreenCanvas {
 -    display: flex;
--    width: 100vw;
--    height: 100vh;
+-    width: 100%;
+-    height: 100%;
 -    align-items: center;
 -    justify-content: center;
 -    background: red;

threejs/lessons/ru/threejs-tips.md

@@ -305,8 +305,8 @@ body {
     margin: 0;
 }
 #c {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     display: block;
 +    position: fixed;
 +    left: 0;
@@ -318,8 +318,8 @@ body {
 +  font-size: 7vw;
 +  font-family: sans-serif;
 +  text-align: center;
-+  width: 100vw;
-+  height: 100vh;
++  width: 100%;
++  height: 100%;
 +  display: flex;
 +  justify-content: center;
 +  align-items: center;
@@ -382,8 +382,8 @@ three.js не конфликтует с JavaScript, выполняющим др
 ```
 #background {
     position: fixed;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     left: 0;
     top: 0;
     z-index: -1;

threejs/lessons/threejs-align-html-elements-to-3d.md

@@ -62,16 +62,16 @@ parent container we can make them overlap with this CSS
 
 ```css
 #c {
--    width: 100vw;
--    height: 100vh;
+-    width: 100%;
+-    height: 100%;
 +    width: 100%;  /* let our container decide our size */
 +    height: 100%;
     display: block;
 }
 +#container {
 +  position: relative;  /* makes this the origin of its children */
-+  width: 100vw;
-+  height: 100vh;
++  width: 100%;
++  height: 100%;
 +  overflow: hidden;
 +}
 +#labels {

threejs/lessons/threejs-backgrounds.md

@@ -16,8 +16,8 @@ body {
     margin: 0;
 }
 #c {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     display: block;
 +    background: url(resources/images/daikanyama.jpg) no-repeat center center;
 +    background-size: cover;

threejs/lessons/threejs-multiple-scenes.md

@@ -57,8 +57,8 @@ Then we can setup the CSS maybe something like this
   position: fixed;
   left: 0;
   top: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   display: block;
   z-index: -1;
 }
@@ -562,8 +562,8 @@ then we'll change the CSS
 -  position: absolute;
 -  left: 0;
 -  top: 0;
--  width: 100vw;
--  height: 100vh;
+-  width: 100%;
+-  height: 100%;
 -  display: block;
 -  z-index: -1;
 -}

threejs/lessons/threejs-offscreencanvas.md

@@ -215,8 +215,8 @@ and some CSS for that
 ```css
 #noOffscreenCanvas {
     display: flex;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     align-items: center;
     justify-content: center;
     background: red;
@@ -364,8 +364,8 @@ and some CSS for that
 ```css
 -#noOffscreenCanvas {
 -    display: flex;
--    width: 100vw;
--    height: 100vh;
+-    width: 100%;
+-    height: 100%;
 -    align-items: center;
 -    justify-content: center;
 -    background: red;

threejs/lessons/threejs-tips.md

@@ -310,8 +310,8 @@ body {
     margin: 0;
 }
 #c {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     display: block;
 +    position: fixed;
 +    left: 0;
@@ -323,8 +323,8 @@ body {
 +  font-size: 7vw;
 +  font-family: sans-serif;
 +  text-align: center;
-+  width: 100vw;
-+  height: 100vh;
++  width: 100%;
++  height: 100%;
 +  display: flex;
 +  justify-content: center;
 +  align-items: center;
@@ -386,8 +386,8 @@ a border by default.
 ```
 #background {
     position: fixed;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     left: 0;
     top: 0;
     z-index: -1;

threejs/lessons/threejs-voxel-geometry.md

@@ -897,8 +897,8 @@ body {
     margin: 0;
 }
 #c {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     display: block;
 }
 +#ui {

threejs/lessons/threejs-webvr.md

@@ -301,8 +301,8 @@ body {
     margin: 0;
 }
 #c {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     display: block;
 }
 +.mode {

threejs/resources/lesson-helper.css

@@ -2,8 +2,8 @@
   position: absolute;
   left: 0;
   top: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   background: red;
   color: white;
   font-family: monospace;

threejs/resources/lessons-helper.js

@@ -97,8 +97,8 @@
           left: 0;
           top: 0;
           background-color: #DEF;
-          width: 100vw;
-          height: 100vh;
+          width: 100%;
+          height: 100%;
           display: flex;
           flex-flow: column;
           justify-content: center;

threejs/resources/threejs-tutorials.css

@@ -78,11 +78,11 @@ body {
 /* styles to apply if in an iframe */
 
 html.iframe {
-    height: 100vh;
+    height: 100%;
 }
 body.iframe {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   margin: 0;
   overflow: hidden;
 }
@@ -91,8 +91,8 @@ body.iframe {
   display: none;
 }
 .iframe .divcavnas {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
 }
 .iframe>#example {
   width: 100%;
@@ -130,8 +130,8 @@ body.iframe {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     position: absolute;
     left: 0;
     top: 0;
@@ -152,11 +152,11 @@ body.iframe {
     max-width: 300px !important;
   }
   canvas {
-    width: 100vw;
+    width: 100%;
   }
   .iframe canvas {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     border: none;
   }
   #uiContainer {

threejs/threejs-align-html-elements-to-3d-globe-too-many-labels.html

@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Align HTML Elements to 3D Globe</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
         font-family: sans-serif;
     }
@@ -17,8 +18,8 @@
     }
     #container {
       position: relative;  /* makes this the origin of its children */
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       overflow: hidden;
     }
     #labels {

threejs/threejs-align-html-elements-to-3d-globe.html

@@ -6,9 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Align HTML Elements to 3D Globe</title>
     <style>
-    body {
+    html, body {
         margin: 0;
         font-family: sans-serif;
+        height: 100%;
     }
     #c {
         width: 100%;  /* let our container decide our size */
@@ -17,8 +18,8 @@
     }
     #container {
       position: relative;  /* makes this the origin of its children */
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       overflow: hidden;
     }
     #labels {

threejs/threejs-align-html-to-3d-w-hiding.html

@@ -6,8 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Align HTML Elements w/hiding</title>
     <style>
-    body {
+    html, body {
         margin: 0;
+        height: 100%;
     }
     #c {
         width: 100%;  /* let our container decide our size */
@@ -16,8 +17,8 @@
     }
     #container {
       position: relative;  /* makes this the origin of its children */
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       overflow: hidden;
     }
     #labels {

threejs/threejs-align-html-to-3d-w-sorting.html

@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Align HTML Elements w/hiding</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
@@ -16,8 +17,8 @@
     }
     #container {
       position: relative;  /* makes this the origin of its children */
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       overflow: hidden;
     }
     #labels {

threejs/threejs-align-html-to-3d.html

@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Align HTML Elements to 3D</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
@@ -16,8 +17,8 @@
     }
     #container {
       position: relative;  /* makes this the origin of its children */
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       overflow: hidden;
     }
     #labels {

threejs/threejs-background-css.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Background CSS</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
         background: url(resources/images/daikanyama.jpg) no-repeat center center ;
         background-size: cover;

threejs/threejs-background-cubemap.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Background Cubemap</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-background-equirectangularmap.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Background Cubemap</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-background-scene-background-fixed-aspect.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Background - Scene Background Fixed Aspect</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-background-scene-background.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Background - Scene Background</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-background-separate-scene-bad-aspect.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Background bad aspect</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-background-separate-scene.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Background CSS</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-billboard-labels-w-sprites-adjust-height.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Billboard Labels w/Sprites height adjusted</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-billboard-labels-w-sprites.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Billboard Labels w/Sprites</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-billboard-trees-no-billboards.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Billboard Trees No Billboards</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-billboard-trees-static-billboards.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Billboard Trees Static Billboards</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-canvas-textured-cube-qix.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Canvas Textured Cube</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-canvas-textured-cube.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Canvas Textured Cube</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-canvas-textured-labels-one-canvas.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Canvas Textured Labels One Canvas</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-canvas-textured-labels-scale-to-fit.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Canvas Textured Labels Scale to Fit</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-canvas-textured-labels.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Canvas Textured Labels</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-cleanup-loaded-files.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Cleanup Loaded Files</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     #root {

threejs/threejs-cleanup-simple.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Cleanup</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     #root {

threejs/threejs-custom-buffergeometry-cube-indexed.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Custom BufferGeometry - Indexed</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-custom-buffergeometry-cube-typedarrays.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Custom BufferGeometry - TypedArrays</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-custom-buffergeometry-cube.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Custom BufferGeometry - Cube</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-custom-buffergeometry-dynamic.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Custom BufferGeometry - Dynamic</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-custom-geometry-cube-face-colors.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Custom Geometry - Cube - Face Colors</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-custom-geometry-cube-face-normals.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Custom Geometry - Cube - face normals</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-custom-geometry-cube-texcoords.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Custom Geometry - Cube - Texture Coordinates</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-custom-geometry-cube-vertex-colors.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Custom Geometry - Cube - Vertex Colors</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-custom-geometry-cube-vertex-normals.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Custom Geometry - Cube - Vertex Normals</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-custom-geometry-cube.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Custom Geometry - Cube</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-custom-geometry-heightmap.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Custom Geometry - Heightmap</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-debug-js-clearing-logger.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Debug - Clearing Logger</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     #debug {

threejs/threejs-debug-js-html-elements.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Debug - HTML Elements</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     #debug {

threejs/threejs-debug-js-params.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Debug - Params</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     #debug {

threejs/threejs-fog-gui.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Fog w/GUI</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-fog.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Fog</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-indexed-textures-picking-and-highlighting.html

@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Indexed Textures - Picking and Highlighting</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
         font-family: sans-serif;
     }
@@ -17,8 +18,8 @@
     }
     #container {
       position: relative;  /* makes this the origin of its children */
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       overflow: hidden;
     }
     #labels {

threejs/threejs-indexed-textures-picking-debounced.html

@@ -6,7 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Indexed Textures - Picking and Highlighting - Debounced</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
+        height: 100%;
         margin: 0;
         font-family: sans-serif;
     }
@@ -17,8 +19,8 @@
     }
     #container {
       position: relative;  /* makes this the origin of its children */
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       overflow: hidden;
     }
     #labels {

threejs/threejs-indexed-textures-picking.html

@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Indexed Textures - Picking</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
         font-family: sans-serif;
     }
@@ -17,8 +18,8 @@
     }
     #container {
       position: relative;  /* makes this the origin of its children */
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       overflow: hidden;
     }
     #labels {

threejs/threejs-indexed-textures-random-colors.html

@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Indexed Textures - Random Colors</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
         font-family: sans-serif;
     }
@@ -17,8 +18,8 @@
     }
     #container {
       position: relative;  /* makes this the origin of its children */
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       overflow: hidden;
     }
     #labels {

threejs/threejs-lots-of-objects-animated.html

@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Lots of Objects - Animated</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
         color: white;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     #ui {

threejs/threejs-lots-of-objects-merged-vertexcolors.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Lots of Objects - Merged w/vertex colors</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-lots-of-objects-merged.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Lots of Objects - Merged</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-lots-of-objects-morphtargets-w-colors.html

@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Lots of Objects - MorphTargets w/colors</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
         color: white;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     #ui {

threejs/threejs-lots-of-objects-morphtargets.html

@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Lots of Objects - Morphtargets</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
         color: white;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     #ui {

threejs/threejs-lots-of-objects-multiple-data-sets.html

@@ -6,13 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Lots of Objects - Multiple Datasets</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
         color: white;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     #ui {

threejs/threejs-lots-of-objects-slow.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Lots of Objects - Slow</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-multiple-scenes-controls.html

@@ -10,8 +10,8 @@
       position: absolute;
       left: 0;
       top: 0;
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       display: block;
       z-index: -1;
     }

threejs/threejs-multiple-scenes-generic.html

@@ -10,8 +10,8 @@
       position: absolute;
       left: 0;
       top: 0;
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       display: block;
       z-index: -1;
     }

threejs/threejs-multiple-scenes-selector.html

@@ -10,8 +10,8 @@
       position: absolute;
       left: 0;
       top: 0;
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       display: block;
       z-index: -1;
     }

threejs/threejs-multiple-scenes-v1.html

@@ -10,8 +10,8 @@
       position: fixed;
       left: 0;
       top: 0;
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       display: block;
       z-index: -1;
     }

threejs/threejs-multiple-scenes-v2.html

@@ -10,8 +10,8 @@
       position: fixed;
       left: 0;
       top: 0;
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       display: block;
       z-index: -1;
     }

threejs/threejs-multiple-scenes-v3.html

@@ -10,8 +10,8 @@
       position: absolute;
       left: 0;
       top: 0;
-      width: 100vw;
-      height: 100vh;
+      width: 100%;
+      height: 100%;
       display: block;
       z-index: -1;
     }

threejs/threejs-offscreencanvas-w-fallback.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - OffscreenCanvas w/Fallback</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-offscreencanvas-w-orbitcontrols.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Offscreen Canvas</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     #c:focus {

threejs/threejs-offscreencanvas-w-picking.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - OffscreenCanvas Picking</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-offscreencanvas.html

@@ -6,18 +6,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - OffscreenCanvas</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     #noOffscreenCanvas {
         display: flex;
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         align-items: center;
         justify-content: center;
         background: red;

threejs/threejs-picking-gpu.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Picking - RayCaster w/Transparency</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-picking-raycaster-complex-geo.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Picking - RayCaster</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-picking-raycaster-transparency.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Picking - RayCaster w/Transparency</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-picking-raycaster.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Picking - RayCaster</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-postprocessing-adobe-lut-to-png-converter.html

@@ -5,8 +5,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
     <style>
-    body {
-      min-height: 100vh;
+    html, body {
+      min-height: 100%;
       font-family: monospace;
       background: #222;
       color: white;
@@ -17,7 +17,7 @@
       image-rendering: pixelated;
     }
     #cube {
-      max-width: calc(100vw - 20px);
+      max-width: calc(100% - 20px);
       overflow: auto;
     }
   </style>

threejs/threejs-postprocessing-custom.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - PostProcessing - Custom</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-postprocessing-gui.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - PostProcessing - GUI</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-postprocessing.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - PostProcessing</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-primitives-text.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Primitives</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-primitives.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Primitives</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-render-on-demand-w-damping.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Rendering on Demand w/Damping</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-render-on-demand-w-gui.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Rendering on Demand w/GUI</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-render-on-demand.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Rendering on Demand</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>

threejs/threejs-render-target.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <title>Three.js - Responsive</title>
     <style>
-    body {
+    html, body {
+        height: 100%;
         margin: 0;
     }
     #c {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: block;
     }
     </style>