Fix subpixel sizes support (#204)

Author: el-fuego

src/ElementQueries.js

@@ -38,6 +38,26 @@
             return parseFloat(fontSize) || 16;
         }
 
+        /**
+        * Get element size
+        * @param {HTMLElement} element
+        * @returns {Object} {width, height}
+        */
+        function getElementSize(element) {
+            if (!element.getBoundingClientRect) {
+                return {
+                    width: element.offsetWidth,
+                    height: element.offsetHeight
+                }
+            }
+
+            var rect = element.getBoundingClientRect();
+            return {
+                width: Math.round(rect.width),
+                height: Math.round(rect.height)
+            }
+        }
+
         /**
          *
          * @copyright https://github.com/Mr0grog/element-query/blob/master/LICENSE
@@ -85,7 +105,7 @@
         function SetupInformation(element) {
             this.element = element;
             this.options = {};
-            var key, option, width = 0, height = 0, value, actualValue, attrValues, attrValue, attrName;
+            var key, option, elementSize, value, actualValue, attrValues, attrValue, attrName;
 
             /**
              * @param {Object} option {mode: 'min|max', property: 'width|height', value: '123px'}
@@ -102,8 +122,7 @@
              */
             this.call = function() {
                 // extract current dimensions
-                width = this.element.offsetWidth;
-                height = this.element.offsetHeight;
+                elementSize = getElementSize(this.element);
 
                 attrValues = {};
 
@@ -115,7 +134,7 @@
 
                     value = convertToPx(this.element, option.value);
 
-                    actualValue = option.property == 'width' ? width : height;
+                    actualValue = option.property == 'width' ? elementSize.width : elementSize.height;
                     attrName = option.mode + '-' + option.property;
                     attrValue = '';
 

src/ResizeSensor.js

@@ -53,6 +53,26 @@
         }
     }
 
+    /**
+    * Get element size
+    * @param {HTMLElement} element
+    * @returns {Object} {width, height}
+    */
+    function getElementSize(element) {
+        if (!element.getBoundingClientRect) {
+            return {
+                width: element.offsetWidth,
+                height: element.offsetHeight
+            }
+        }
+
+        var rect = element.getBoundingClientRect();
+        return {
+            width: Math.round(rect.width),
+            height: Math.round(rect.height)
+        }
+    }
+
     /**
      * Class for dimension change detection.
      *
@@ -131,8 +151,9 @@
             var expandChild = expand.childNodes[0];
             var shrink = element.resizeSensor.childNodes[1];
             var dirty, rafId, newWidth, newHeight;
-            var lastWidth = element.offsetWidth;
-            var lastHeight = element.offsetHeight;
+            var size = getElementSize(element);
+            var lastWidth = size.width;
+            var lastHeight = size.height;
 
             var reset = function() {
                 expandChild.style.width = '100000px';
@@ -161,8 +182,9 @@
             };
 
             var onScroll = function() {
-                newWidth = element.offsetWidth;
-                newHeight = element.offsetHeight;
+                var size = getElementSize(element);
+                var newWidth = size.width;
+                var newHeight = size.height;
                 dirty = newWidth != lastWidth || newHeight != lastHeight;
 
                 if (dirty && !rafId) {
@@ -195,7 +217,7 @@
 
     ResizeSensor.detach = function(element, ev) {
         forEachElement(element, function(elem){
-            if (!elem) return
+            if (!elem) return;
             if(elem.resizedAttached && typeof ev == "function"){
                 elem.resizedAttached.remove(ev);
                 if(elem.resizedAttached.length()) return;