Fixed #282, #285 - fix issue with detecting invisible elements.

Author: marcj

src/ResizeSensor.js

@@ -36,6 +36,13 @@
             return globalWindow.setTimeout(fn, 20);
         };
 
+    var cancelAnimationFrame = globalWindow.cancelAnimationFrame ||
+        globalWindow.mozCancelAnimationFrame ||
+        globalWindow.webkitCancelAnimationFrame ||
+        function (timer) {
+            globalWindow.clearTimeout(timer);
+        };
+
     /**
      * Iterate over each of the provided element(s).
      *
@@ -102,8 +109,9 @@
      * @constructor
      */
     var ResizeSensor = function(element, callback) {
-        var lastAnimationFrame = 0;
-        
+        //Is used when checking in reset() only for invisible elements
+        var lastAnimationFrameForInvisibleCheck = 0;
+
         /**
          *
          * @constructor
@@ -201,12 +209,15 @@
                 element.style.position = 'relative';
             }
 
-            var dirty, rafId;
+            var dirty = false;
+
+            //last request animation frame id used in onscroll event
+            var rafId = 0;
             var size = getElementSize(element);
             var lastWidth = 0;
             var lastHeight = 0;
             var initialHiddenCheck = true;
-            lastAnimationFrame = 0;
+            lastAnimationFrameForInvisibleCheck = 0;
 
             var resetExpandShrink = function () {
                 var width = element.offsetWidth;
@@ -228,10 +239,9 @@
                     var invisible = element.offsetWidth === 0 && element.offsetHeight === 0;
                     if (invisible) {
                         // Check in next frame
-                        if (!lastAnimationFrame){
-                            lastAnimationFrame = requestAnimationFrame(function(){
-                                lastAnimationFrame = 0;
-
+                        if (!lastAnimationFrameForInvisibleCheck){
+                            lastAnimationFrameForInvisibleCheck = requestAnimationFrame(function(){
+                                lastAnimationFrameForInvisibleCheck = 0;
                                 reset();
                             });
                         }
@@ -282,8 +292,11 @@
             addEvent(expand, 'scroll', onScroll);
             addEvent(shrink, 'scroll', onScroll);
 
-            // Fix for custom Elements
-            lastAnimationFrame = requestAnimationFrame(reset);
+            // Fix for custom Elements and invisible elements
+            lastAnimationFrameForInvisibleCheck = requestAnimationFrame(function(){
+                lastAnimationFrameForInvisibleCheck = 0;
+                reset();
+            });
         }
 
         forEachElement(element, function(elem){
@@ -292,9 +305,9 @@
 
         this.detach = function(ev) {
             // clean up the unfinished animation frame to prevent a potential endless requestAnimationFrame of reset
-            if (!lastAnimationFrame) {
-                window.cancelAnimationFrame(lastAnimationFrame);
-                lastAnimationFrame = 0;
+            if (!lastAnimationFrameForInvisibleCheck) {
+                cancelAnimationFrame(lastAnimationFrameForInvisibleCheck);
+                lastAnimationFrameForInvisibleCheck = 0;
             }
             ResizeSensor.detach(element, ev);
         };

tests/demo.html

@@ -97,6 +97,15 @@
         .example-2[min-width~="400px"] .example-2-box {
             background-color: gray;
         }
+
+        #example-invisible {
+            display: none;
+        }
+
+        #example-invisible[min-width~="100px"]{
+            color: red;
+            font-weight: bold;
+        }
     </style>
 
     <script type="text/javascript">
@@ -257,7 +266,7 @@ <h2>Demo 2</h2>
                     </div>
                 </div>
                 <div class="code html">
-                    <textarea class="html">
+                    <textarea class="html" readonly>
 <div class="example-2">
     <h2>Demo 2</h2>
     <div class="example-2-box">
@@ -373,6 +382,26 @@ <h2>ResizeSensor Demo</h2>
                 </div>
             </div>
 
+            <div class="example">
+                <h2>Invisible Demo</h2>
+                <div style="height: 80px">
+                    <div class="examplesResizerDemos">
+                        Press button to show.
+                        <div id="example-invisible">
+                            This should be red.
+                        </div>
+                    </div>
+                </div>
+                <div class="example-desc">
+                    <button onclick="document.getElementById('example-invisible').style.display = 'block'">Unhide box</button>
+                    <script type="text/javascript">
+                        new ResizeSensor(document.getElementById('example-invisible'), function(d) {
+                            console.log('invisible box changed', d);
+                        });
+                    </script>
+                </div>
+            </div>
+
             <div class="example">
                 <h2>Performance Demo</h2>
                 <div class="dynamic">
@@ -393,4 +422,4 @@ <h2>Performance Demo</h2>
         </div>
     </div>
 </div>
-</body>
+</body>