ResizeObserver 在 Windows 上未按预期工作

Question

我正在玩 ResizeObserver（google chrome 支持实验性网络平台标志）。我使用 jQuery UI 可调整大小创建了 codepen 演示。它在 chromium linux 上工作正常，但在 Windows 上它会在一段时间后停止或只执行一次。

我的代码如下所示：

$('#node').css({
  width: 140,
  height: 50
}).resizable();

function resizer(node, callback) {
  if (window.ResizeObserver) {
    var resizer = new ResizeObserver(function(entries) {
      callback(entries[0]);
    });
    resizer.observe(node);
    return () => resizer.unobserve(node);
  } else {
    return () => undefined;
  }
}
resizer(document.querySelector('.content'), function(entry) {
  var width = entry.contentRect.width;
  var height = entry.contentRect.height
  console.log(width + 'x' + height);
  // custom event found on
  // https://ebidel.github.io/demos/dom_resize_events.html
  entry.target.dispatchEvent(new CustomEvent('resize', {
    detail: {width,height}
  }));
});
document.querySelector('.content').addEventListener('resize', (e) => {
  console.log(e.detail);
});

我尝试重新启动浏览器，close/open开发者工具也将文件下载到本地驱动器并使用文件协议打开，得到了相同的结果。

google chrome example 工作正常，

这是一个my pen

Answer 1

观察者似乎得到了垃圾收集，添加

var r;
...
function resizer(node, callback) {
   ...
   var resizer = new ResizeObserver(...);
   r = resizer;
   ...
}

解决了问题

ResizeObserver 在 Windows 上未按预期工作

ResizeObserver don't work as expected on Windows

html

javascript

resize

google-chrome