resize detector based on object instead iframe

Author: dramoturg

src/components/ResizeDetector/ResizeDetector.jsx

@@ -7,8 +7,7 @@ export const RESIZE_DETECTOR = Symbol('ResizeDetector');
 @PURE
 @themr(RESIZE_DETECTOR)
 export default class ResizeDetector extends React.Component {
-
-	_resizeDetector;
+	_object;
 
 	static propTypes = {
 		theme: React.PropTypes.shape({
@@ -18,23 +17,42 @@ export default class ResizeDetector extends React.Component {
 	}
 
 	componentDidMount() {
-		this._resizeDetector.contentWindow.addEventListener('resize', this.onResize);
+		this._object.contentDocument.defaultView.addEventListener('resize', this.onResize);
 	}
 
 	componentWillUnmount() {
-		this._resizeDetector.contentWindow.removeEventListener('resize', this.onResize);
-		delete this['_resizeDetector'];
+		this._object.contentDocument.defaultView.removeEventListener('resize', this.onResize);
+		delete this['_object'];
 	}
 
 	render() {
+		const style = {
+			display: 'block',
+			position: 'absolute',
+			top: 0,
+			left: 0,
+			height: '100%',
+			width: '100%',
+			overflow: 'hidden',
+			pointerEvents: 'none',
+			zIndex: '-1'
+		};
 		const {theme} = this.props;
+
 		return (
-			<iframe src="about:blank" ref={el => this._resizeDetector = el} className={theme.container} />
+			<object style={style} type="text/html" ref={el => this._object = el} data="about: blank"
+			        className={theme.container}/>
 		);
 	}
 
 	onResize = (event) => {
-		const {onResize} = this.props;
-		onResize && onResize(event);
+		const win = event.target || event.srcElement;
+		if (win.__resizeRAF__) {
+			cancelAnimationFrame(win.__resizeRAF__);
+		}
+		win.__resizeRAF__ = requestAnimationFrame(() => {
+			const {onResize} = this.props;
+			onResize && onResize(event);
+		});
 	}
 }