From e63655feb653af5f908f3f172b2a57c0291aab06 Mon Sep 17 00:00:00 2001
From: Paul Harper <paul@chartio.com>
Date: Thu, 23 Jul 2015 11:36:09 -0700
Subject: [PATCH 1/2] Overlays don't position themselves properly when target
 is an SVG

Fixes #1050
---
 src/utils/domUtils.js             | 20 ++++++++++++++++++++
 src/utils/overlayPositionUtils.js | 27 ++++++++++-----------------
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/utils/domUtils.js b/src/utils/domUtils.js
index 22e542d0f2..946e26405a 100644
--- a/src/utils/domUtils.js
+++ b/src/utils/domUtils.js
@@ -137,6 +137,25 @@ function getPosition(elem, offsetParent) {
   };
 }
 
+/**
+ * Get an element's size
+ *
+ * @param {HTMLElement} elem
+ * @returns {{width: number, height: number}}
+ */
+function getSize(elem) {
+  let rect = {
+    width: elem.offsetWidth,
+    height: elem.offsetHeight
+  };
+  if (typeof elem.getBoundingClientRect !== 'undefined') {
+    let {width, height} = elem.getBoundingClientRect();
+    rect.width = width || rect.width;
+    rect.height = height || rect.height;
+  }
+  return rect;
+}
+
 /**
  * Get parent element
  *
@@ -187,6 +206,7 @@ export default {
   getComputedStyles,
   getOffset,
   getPosition,
+  getSize,
   activeElement: getActiveElement,
   offsetParent: offsetParentFunc
 };
diff --git a/src/utils/overlayPositionUtils.js b/src/utils/overlayPositionUtils.js
index 81a9b2d4d3..d8909ec2ac 100644
--- a/src/utils/overlayPositionUtils.js
+++ b/src/utils/overlayPositionUtils.js
@@ -3,42 +3,35 @@ import domUtils from './domUtils';
 const utils = {
 
   getContainerDimensions(containerNode) {
-    let width, height, scroll;
+    let size, scroll;
 
     if (containerNode.tagName === 'BODY') {
-      width = window.innerWidth;
-      height = window.innerHeight;
+      size = {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
       scroll =
         domUtils.ownerDocument(containerNode).documentElement.scrollTop ||
         containerNode.scrollTop;
     } else {
-      width = containerNode.offsetWidth;
-      height = containerNode.offsetHeight;
+      size = domUtils.getSize(containerNode);
       scroll = containerNode.scrollTop;
     }
 
-    return {width, height, scroll};
+    return {...size, scroll};
   },
 
   getPosition(target, container) {
     const offset = container.tagName === 'BODY' ?
       domUtils.getOffset(target) : domUtils.getPosition(target, container);
-
-    return {
-      ...offset,
-
-      // In Firefox, the target does not have a offsetHeight or offsetWidth
-      // property. For now, default them to 0 to keep code from breaking.
-      height: target.offsetHeight || 0,
-      width: target.offsetWidth || 0
-    };
+    const size = domUtils.getSize(target);
+    return {...offset, ...size};
   },
 
   calcOverlayPosition(placement, overlayNode, target, container, padding) {
     const childOffset = utils.getPosition(target, container);
 
-    const overlayHeight = overlayNode.offsetHeight;
-    const overlayWidth = overlayNode.offsetWidth;
+    const {height: overlayHeight, width: overlayWidth} = domUtils.getSize(overlayNode);
 
     let positionLeft, positionTop, arrowOffsetLeft, arrowOffsetTop;
 

From c8d9a33f4fa06c18218e3c9c6163e58c9950ad42 Mon Sep 17 00:00:00 2001
From: Paul Harper <paul@chartio.com>
Date: Tue, 28 Jul 2015 14:38:50 -0700
Subject: [PATCH 2/2] Ensure getSize always returns a number

---
 src/utils/domUtils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/domUtils.js b/src/utils/domUtils.js
index 946e26405a..256aaf64f8 100644
--- a/src/utils/domUtils.js
+++ b/src/utils/domUtils.js
@@ -145,8 +145,8 @@ function getPosition(elem, offsetParent) {
  */
 function getSize(elem) {
   let rect = {
-    width: elem.offsetWidth,
-    height: elem.offsetHeight
+    width: elem.offsetWidth || 0,
+    height: elem.offsetHeight || 0
   };
   if (typeof elem.getBoundingClientRect !== 'undefined') {
     let {width, height} = elem.getBoundingClientRect();