diff --git a/src/ResizeSensor.js b/src/ResizeSensor.js
index 555a906..abcf7e8 100755
--- a/src/ResizeSensor.js
+++ b/src/ResizeSensor.js
@@ -74,6 +74,18 @@
}
}
+ /**
+ * Apply CSS styles to element.
+ *
+ * @param {HTMLElement} element
+ * @param {Object} style
+ */
+ function setStyle(element, style) {
+ Object.keys(style).forEach(function(key) {
+ element.style[key] = style[key];
+ });
+ }
+
/**
* Class for dimension change detection.
*
@@ -131,18 +143,47 @@
element.resizeSensor = document.createElement('div');
element.resizeSensor.dir = 'ltr';
element.resizeSensor.className = 'resize-sensor';
- var style = 'pointer-events: none; position: absolute; left: 0px; top: 0px; right: 0; bottom: 0; ' +
- 'overflow: hidden; z-index: -1; visibility: hidden; max-width: 100%;';
- var styleChild = 'position: absolute; left: 0; top: 0; transition: 0s;';
-
- element.resizeSensor.style.cssText = style;
- element.resizeSensor.innerHTML =
- '' +
- '';
+
+ var style = {
+ pointerEvents: 'none',
+ position: 'absolute',
+ left: '0px',
+ top: '0px',
+ right: '0px',
+ bottom: '0px',
+ overflow: 'hidden',
+ zIndex: '-1',
+ visibility: 'hidden',
+ maxWidth: '100%'
+ };
+ var styleChild = {
+ position: 'absolute',
+ left: '0px',
+ top: '0px',
+ transition: '0s',
+ };
+
+ setStyle(element.resizeSensor, style);
+
+ var expand = document.createElement('div');
+ expand.className = 'resize-sensor-expand';
+ setStyle(expand, style);
+
+ var expandChild = document.createElement('div');
+ setStyle(expandChild, styleChild);
+ expand.appendChild(expandChild);
+
+ var shrink = document.createElement('div');
+ shrink.className = 'resize-sensor-shrink';
+ setStyle(shrink, style);
+
+ var shrinkChild = document.createElement('div');
+ setStyle(shrinkChild, styleChild);
+ setStyle(shrinkChild, { width: '200%', height: '200%' });
+ shrink.appendChild(shrinkChild);
+
+ element.resizeSensor.appendChild(expand);
+ element.resizeSensor.appendChild(shrink);
element.appendChild(element.resizeSensor);
var computedStyle = window.getComputedStyle(element);
@@ -151,9 +192,6 @@
element.style.position = 'relative';
}
- var expand = element.resizeSensor.childNodes[0];
- var expandChild = expand.childNodes[0];
- var shrink = element.resizeSensor.childNodes[1];
var dirty, rafId;
var size = getElementSize(element);
var lastWidth = size.width;