diff --git a/src/utils/domUtils.js b/src/utils/domUtils.js index 22e542d0f2..256aaf64f8 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 || 0, + height: elem.offsetHeight || 0 + }; + 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;