[QUAL] Upgrade Jeeliz FaceFilter, increase stabilization [FIX] Potent…

…ial fix for jeeliz/jeelizFaceFilter#292

demos/appearance/styleFullScreen.css

@@ -1,10 +1,16 @@
- a {color: #eee; text-decoration: none}
+a {color: #eee; text-decoration: none}
 a:hover {color: blue;}
-body {overflow: auto; overflow-y: auto;
-    margin: 0px;}
+body {
+  overflow: auto;
+  overflow-y: auto;
+  margin: 0;
+}
+
 #jeeFaceFilterCanvas {
-    z-index: 10;
-    position: absolute; 
-    width: 100%; height: 100%;
-    top: 0px; left: 0px;
+  z-index: 10;
+  position: fixed; 
+  width: 100vw;
+  height: 100%;
+  top: 0;
+  left: 0;
 } 

demos/threejs/gltf_fullScreen/main.js

@@ -59,6 +59,7 @@ function main(){
   JeelizResizer.size_canvas({
     canvasId: 'jeeFaceFilterCanvas',
     isFullScreen: true,
+    isApplyCSS: true,
     callback: start,
     onResize: function(){
       JeelizThreeHelper.update_camera(THREECAMERA);

helpers/JeelizResizer.js

@@ -10,7 +10,6 @@ need it flipped (mirror effect), while if the rear camera is used we need it not
 * to get the best camera resolution (either above the canvas resolution or closer)
 to balance between performance and quality
 */ 
-"use strict";
 
 const JeelizResizer = (function(){
   // private vars:
@@ -35,13 +34,15 @@ const JeelizResizer = (function(){
     [1920, 1080]
   ];
 
+
   //private functions
   function add_CSStransform(domElement, CSS){
     const CSStransform = domElement.style.transform;
     if (CSStransform.indexOf(CSS) !== -1) return;
     domElement.style.transform = CSS + ' ' + CSStransform;
   }
 
+
   // Compute overlap between 2 rectangles A and B
   // characterized by their width and their height in pixels
   // the rectangles are centered
@@ -71,13 +72,15 @@ const JeelizResizer = (function(){
     }
 
     return areaOverlap / areaTotal;
-  } //end compute_overlap()
+  }
+
 
   function update_sizeCanvas(){
     const domRect = _domCanvas.getBoundingClientRect();
     apply_sizeCanvas(domRect.width, domRect.height);
   }
 
+
   function apply_sizeCanvas(width, height){
     _whCanvasPx = [
       Math.round(_overSamplingFactor * width),
@@ -95,6 +98,7 @@ const JeelizResizer = (function(){
     }
   }
 
+
   function on_windowResize(){
     // avoid to resize too often using a timer
     // (it can create weird bug with some browsers)
@@ -104,6 +108,7 @@ const JeelizResizer = (function(){
     _timerFullScreen = setTimeout(resize_fullScreen, 50);
   }
 
+
   function resize_canvasToFullScreen(){
     const wh = [window['innerWidth'], window['innerHeight']];
     if (_isInvFullscreenWH){
@@ -112,6 +117,7 @@ const JeelizResizer = (function(){
     apply_sizeCanvas(wh[0], wh[1]);
   }
 
+
   function resize_fullScreen(){
     resize_canvasToFullScreen();
     JEELIZFACEFILTER.resize();
@@ -121,6 +127,7 @@ const JeelizResizer = (function(){
     }
   }
 
+
   // public methods:
   const that = {
     // return true or false if the device is in portrait or landscape mode