Me encuentro con un bucle recursivo con un ResizeObserver, donde algo dentro del contenedor observado cambia el tamaño del contenedor al volver a renderizar, lo que hace que ResizeObserver se vuelva a activar.

En este caso específico, hay varios elementos que sospecho que pueden estar causando esto, pero no he podido identificar qué lo causa. Con el depurador de DevTools, puedo ver que se activa ResizeObserver, pero el seguimiento de la pila está vacío.

Hay una buena posibilidad de que sea causado por Javascript, pero una posibilidad igualmente buena de que sea causado por alguna parte del diseño css, que no sería rastreable por la pila.

¿Hay alguna forma de ver por qué se llama ResizeObserver?

La devolución de llamada incluye el objetivo, pero el objetivo es el objeto observado , no el objeto modificado originalmente. Se puede encontrar una reproducción mínima aquí: 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; }