0

我遇到了一个带有 ResizeObserver 的递归循环，其中观察到的容器内的某些东西在重新渲染时改变了容器的大小，这导致 ResizeObserver 重新触发。

在这种特定情况下，我怀疑有几个项目可能会导致这种情况，但无法查明是什么原因造成的。使用 DevTools 调试器，我可以看到 ResizeObserver 被触发，但堆栈跟踪为空。

很有可能它是由 Javascript 引起的，但同样有可能是由 css 布局的某些部分引起的，它不能被堆栈跟踪。

有什么方法可以查看为什么调用 ResizeObserver ？

回调包含目标，但目标是观察到的对象，而不是最初更改的对象。可以在这里找到最小的复制品 - https://jsfiddle.net/jamessw/5czoyws6/44/

  <div id="observed">
    <div id="changed">
      This is short text that will get long
    </div>
  </div>
  <br /><br />
  <div id="output">
    Entry target id:
  </div>
  <button id="changeButton">
    Change
  </button>

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const output = document.getElementById('output');
    output.innerHTML += entry.target.id + ' ';
  }
});
const element = document.getElementById('observed')
resizeObserver.observe(element);

const button = document.getElementById('changeButton');
button.addEventListener('click', () => {
  const changed = document.getElementById('changed');
  changed.innerHTML += ' foo'
})

#observed{
  float: left;
  overflow: auto;
}
4

0 回答 0