Reverted: #213 Use resizeobserver when available

due to incompatibility with dom elements detection
marcj · Oct 16, 2018 · 45334e9 · 45334e9
1 parent cd88cc0
commit 45334e9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 71 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "css-element-queries",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "CSS-Element-Queries Polyfill. proof-of-concept for high-speed element dimension/media queries in valid css.",
   "main": "index.js",
   "directories": {

diff --git a/src/ElementQueries.js b/src/ElementQueries.js
@@ -324,7 +324,7 @@
                 }
             }
 
-            element.resizeSensor = new ResizeSensor(element, check);
+            element.resizeSensorInstance = new ResizeSensor(element, check);
             check();
         }
 
@@ -482,11 +482,11 @@
             delete element.elementQueriesSetupInformation;
             delete element.elementQueriesSensor;
 
-        } else if (element.resizeSensor) {
+        } else if (element.resizeSensorInstance) {
             //responsive image
 
-            element.resizeSensor.detach();
-            delete element.resizeSensor;
+            element.resizeSensorInstance.detach();
+            delete element.resizeSensorInstance;
         }
     };
 

diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
@@ -83,9 +83,6 @@
      * @constructor
      */
     var ResizeSensor = function(element, callback) {
-
-        var observer;
-
         /**
          *
          * @constructor
@@ -156,15 +153,21 @@
             var expand = element.resizeSensor.childNodes[0];
             var expandChild = expand.childNodes[0];
             var shrink = element.resizeSensor.childNodes[1];
-
-            var dirty, rafId;
+            var dirty, rafId, newWidth, newHeight;
             var size = getElementSize(element);
             var lastWidth = size.width;
             var lastHeight = size.height;
             var initialHiddenCheck = true, resetRAF_id;
 
+            var reset = function() {
+                //set display to block, necessary otherwise hidden elements won't ever work
+                var invisible = element.offsetWidth === 0 && element.offsetHeight === 0;
+
+                if (invisible) {
+                    var saveDisplay = element.style.display;
+                    element.style.display = 'block';
+                }
 
-            var resetExpandShrink = function () {
                 expandChild.style.width = '100000px';
                 expandChild.style.height = '100000px';
 
@@ -173,33 +176,10 @@
 
                 shrink.scrollLeft = 100000;
                 shrink.scrollTop = 100000;
-            };
 
-            var reset = function() {
-                // Check if element is hidden
-                if (initialHiddenCheck) {
-                    if (!expand.scrollTop && !expand.scrollLeft) {
-
-                        // reset
-                        resetExpandShrink();
-
-                        // Check in next frame
-                        if (!resetRAF_id){
-                            resetRAF_id = requestAnimationFrame(function(){
-                                resetRAF_id = 0;
-
-                                reset();
-                            });
-                        }
-
-                        return;
-                    } else {
-                        // Stop checking
-                        initialHiddenCheck = false;
-                    }
+                if (invisible) {
+                    element.style.display = saveDisplay;
                 }
-
-                resetExpandShrink();
             };
             element.resizeSensor.resetSensor = reset;
 
@@ -208,17 +188,19 @@
 
                 if (!dirty) return;
 
-                lastWidth = size.width;
-                lastHeight = size.height;
+                lastWidth = newWidth;
+                lastHeight = newHeight;
 
                 if (element.resizedAttached) {
                     element.resizedAttached.call(size);
                 }
             };
 
             var onScroll = function() {
-                size = getElementSize(element);
-                dirty = size.width !== lastWidth || size.height !== lastHeight;
+                var size = getElementSize(element);
+                var newWidth = size.width;
+                var newHeight = size.height;
+                dirty = newWidth !== lastWidth || newHeight !== lastHeight;
 
                 if (dirty && !rafId) {
                     rafId = requestAnimationFrame(onResized);
@@ -242,39 +224,12 @@
             requestAnimationFrame(reset);
         }
 
-        if (typeof ResizeObserver !== "undefined") {
-            observer = new ResizeObserver(function(element){
-                forEachElement(element, function (elem) {
-                    callback.call(
-                        this,
-                        {
-                            width: elem.contentRect.width,
-                            height: elem.contentRect.height
-                        }
-                   );
-                });
-            });
-            if (element !== undefined) {
-                forEachElement(element, function(elem){
-                   observer.observe(elem);
-                });
-            }
-        }
-        else {
-            forEachElement(element, function(elem){
-                attachResizeEvent(elem, callback);
-            });
-        }
+        forEachElement(element, function(elem){
+            attachResizeEvent(elem, callback);
+        });
 
         this.detach = function(ev) {
-            if (typeof ResizeObserver != "undefined") {
-                forEachElement(element, function(elem){
-                    observer.unobserve(elem);
-                });
-            }
-            else {
-                ResizeSensor.detach(element, ev);
-            }
+            ResizeSensor.detach(element, ev);
         };
 
         this.reset = function() {