Resize detection only works in Chrome now #12

qingxiang-jia · 2019-08-29T20:13:22Z

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>

ulitcos · 2019-10-18T13:46:30Z

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 #6

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Resize detection only works in Chrome now #12

Resize detection only works in Chrome now #12

qingxiang-jia commented Aug 29, 2019

ulitcos commented Oct 18, 2019 •

edited

Loading

Resize detection only works in Chrome now #12

Resize detection only works in Chrome now #12

Comments

qingxiang-jia commented Aug 29, 2019

ulitcos commented Oct 18, 2019 • edited Loading

ulitcos commented Oct 18, 2019 •

edited

Loading