simple-element-resize-detector
simple-element-resize-detector copied to clipboard
developit
Resize detection only works in Chrome now
I understand that at this point, this project seems to be no longer maintained. But I just want to point out, the code seems only work in Chrome (8/2019), which makes it a bit pointless because Chrome natively supports ResizeObserver. Firefox 68 and Edge (the non-chromium one) currently doesn't support ResizeObserver and this workaround also doesn't work with the two browsers. Here is my code in case I used in incorrectly:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Why it doesn't work</title>
</head>
<body>
<div class='dummy'>This is the content that will be resized.</div>
<style>
.dummy {
width: 100%;
background: red;
position: relative;
}
</style>
<script>
const CSS = `position:absolute;left:0;top:-100%;width:100%;height:100%;margin:1px 0 0;border:none;opacity:0;pointer-events:none;`;
function observe(element, handler) {
const frame = document.createElement('iframe');
const supportsPE =
document.documentMode < 11 && 'pointerEvents' in frame.style;
frame.style.cssText = `${CSS}${supportsPE ? '' : 'visibility:hidden;'}`;
frame.onload = () => {
frame.contentWindow.onresize = () => {
handler(element);
};
};
element.appendChild(frame);
return frame;
};
observe(document.querySelector('.dummy'), function () {
console.log('dummy: resized!');
});
</script>
</body>
</html>
Same problem. I researched problem and find out the reason. In FF the next string return false:
const supportsPE = document.documentMode < 11 && 'pointerEvents' in frame.style;
because document.documentMode is undefined
so supportsPE == false and string added 'visibility:hidden;'
frame.style.cssText = ${CSS}${supportsPE ? '' : 'visibility:hidden;'};
And we get problem, which was resolved here https://github.com/developit/simple-element-resize-detector/issues/6
