I'm running into a recursive loop with a ResizeObserver, where something inside the observed container is changing the size of the container on re-render, which causes the ResizeObserver to re-trigger.

In this specific case, there are several items I suspect may be causing this, but haven't been able to pinpoint what causes it. Using the DevTools debugger, I'm able to see the ResizeObserver is triggered, but the Stack trace is empty.

There's a good chance it's caused by Javascript, but an equally good chance it's caused by some part of the css layout, which would not be stack trace-able.

Is there some way to see why the ResizeObserver is called?

The callback includes the target, but the target is the observed object, not the originally changed object. A minimal reproduction can be found here- 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;
}