Replace visualviewport (#3)

* Replace visualViewport with layout viewport * 0.6.6
wix-incubator · Jul 4, 2024 · 1a5090f · 1a5090f
1 parent aea26d2
commit 1a5090f
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 28 deletions.
diff --git a/dist/index.cjs b/dist/index.cjs
@@ -462,11 +462,7 @@ function calcProgress (p, start, end, duration) {
  */
 function getViewportSize (root, isHorizontal) {
   if (root === window) {
-    return window.visualViewport
-      ? isHorizontal
-        ? window.visualViewport.width
-        : window.visualViewport.height
-      : isHorizontal
+    return isHorizontal
         ? window.document.documentElement.clientWidth
         : window.document.documentElement.clientHeight;
   }
@@ -477,8 +473,8 @@ function getViewportSize (root, isHorizontal) {
 function getAbsoluteOffsetContext () {
   // TODO: re-calc on viewport resize
   return {
-    viewportWidth: window.visualViewport.width,
-    viewportHeight: window.visualViewport.height
+    viewportWidth: window.document.documentElement.clientWidth,
+    viewportHeight: window.document.documentElement.clientHeight
   };
 }
 
@@ -568,7 +564,7 @@ function getController (config) {
       }, VIEWPORT_RESIZE_INTERVAL);
 
       if (root === window) {
-        (window.visualViewport || window).addEventListener('resize', viewportResizeHandler);
+        window.addEventListener('resize', viewportResizeHandler);
       }
       else if (window.ResizeObserver) {
         scrollportResizeObserver = new window.ResizeObserver(viewportResizeHandler);
@@ -671,7 +667,7 @@ function getController (config) {
         scrollportResizeObserver = null;
       }
       else {
-        (window.visualViewport || window).removeEventListener('resize', viewportResizeHandler);
+        window.removeEventListener('resize', viewportResizeHandler);
       }
     }
   }
@@ -881,7 +877,7 @@ class Scroll {
  * @property {number} [velocityMax] max possible value for velocity. Velocity value will be normalized according to this number, so it is kept between 0 and 1. Defaults to 1.
  * @property {boolean} [observeViewportEntry] whether to observe entry/exit of scenes into viewport for disabling/enabling them. Defaults to `true`.
  * @property {boolean} [viewportRootMargin] `rootMargin` option to be used for viewport observation. Defaults to `'7% 7%'`.
- * @property {boolean} [observeViewportResize] whether to observe resize of the visual viewport. Defaults to `false`.
+ * @property {boolean} [observeViewportResize] whether to observe resize of the layout viewport. Defaults to `false`.
  * @property {boolean} [observeSourcesResize] whether to observe resize of view-timeline source elements. Defaults to `false`.
  * @property {Element|Window} [root] the scrollable element, defaults to window.
  */

diff --git a/docs/reference/index.html b/docs/reference/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset='utf-8'>
-  <title>fizban 0.6.4 | Documentation</title>
+  <title>fizban 0.6.5 | Documentation</title>
   <meta name='description' content='Tiny library for performant scroll-driven effects'>
   <meta name='viewport' content='width=device-width,initial-scale=1'>
   <link href='assets/bass.css' rel='stylesheet'>
@@ -15,7 +15,7 @@
       <div id='split-left' class='overflow-auto fs0 height-viewport-100'>
         <div class='py1 px2'>
           <h3 class='mb0 no-anchor'>fizban</h3>
-          <div class='mb1'><code>0.6.4</code></div>
+          <div class='mb1'><code>0.6.5</code></div>
           <input
             placeholder='Filter'
             id='filter-input'
@@ -1079,7 +1079,7 @@ <h3 class='fl m0' id='scrollconfig'>
 
         <div class='space-bottom0'>
           <span class='code bold'>observeViewportResize</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>?)</code>
-          : whether to observe resize of the visual viewport. Defaults to 
+          : whether to observe resize of the layout viewport. Defaults to 
 <code>false</code>
 .
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fizban",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "description": "Tiny library for performant scroll-driven effects",
   "main": "dist/index.cjs",
   "module": "index.js",

diff --git a/src/Scroll.js b/src/Scroll.js
@@ -197,7 +197,7 @@ export class Scroll {
  * @property {number} [velocityMax] max possible value for velocity. Velocity value will be normalized according to this number, so it is kept between 0 and 1. Defaults to 1.
  * @property {boolean} [observeViewportEntry] whether to observe entry/exit of scenes into viewport for disabling/enabling them. Defaults to `true`.
  * @property {boolean} [viewportRootMargin] `rootMargin` option to be used for viewport observation. Defaults to `'7% 7%'`.
- * @property {boolean} [observeViewportResize] whether to observe resize of the visual viewport. Defaults to `false`.
+ * @property {boolean} [observeViewportResize] whether to observe resize of the layout viewport. Defaults to `false`.
  * @property {boolean} [observeSourcesResize] whether to observe resize of view-timeline source elements. Defaults to `false`.
  * @property {Element|Window} [root] the scrollable element, defaults to window.
  */

diff --git a/src/controller.js b/src/controller.js
@@ -50,11 +50,7 @@ function calcProgress (p, start, end, duration) {
  */
 function getViewportSize (root, isHorizontal) {
   if (root === window) {
-    return window.visualViewport
-      ? isHorizontal
-        ? window.visualViewport.width
-        : window.visualViewport.height
-      : isHorizontal
+    return isHorizontal
         ? window.document.documentElement.clientWidth
         : window.document.documentElement.clientHeight;
   }
@@ -65,8 +61,8 @@ function getViewportSize (root, isHorizontal) {
 function getAbsoluteOffsetContext () {
   // TODO: re-calc on viewport resize
   return {
-    viewportWidth: window.visualViewport.width,
-    viewportHeight: window.visualViewport.height
+    viewportWidth: window.document.documentElement.clientWidth,
+    viewportHeight: window.document.documentElement.clientHeight
   };
 }
 
@@ -156,7 +152,7 @@ export function getController (config) {
       }, VIEWPORT_RESIZE_INTERVAL);
 
       if (root === window) {
-        (window.visualViewport || window).addEventListener('resize', viewportResizeHandler);
+        window.addEventListener('resize', viewportResizeHandler);
       }
       else if (window.ResizeObserver) {
         scrollportResizeObserver = new window.ResizeObserver(viewportResizeHandler);
@@ -259,7 +255,7 @@ export function getController (config) {
         scrollportResizeObserver = null;
       }
       else {
-        (window.visualViewport || window).removeEventListener('resize', viewportResizeHandler);
+        window.removeEventListener('resize', viewportResizeHandler);
       }
     }
   }

diff --git a/test/mocks.js b/test/mocks.js
@@ -7,12 +7,9 @@ const _window = {
   eventListeners,
   scrollX: 0,
   scrollY: 0,
-  visualViewport: {
-    width: 500,
-    height: 50
-  },
   document: {
     documentElement: {
+      clientWidth: 500,
       clientHeight: 50
     },
     body: {