I'm trying to use ResizeObserver in order to listen for changes on the height of a document body and consequently adapt the size of the iframe which contains it.
Everything seems to work fine on Chrome, but not on Firefox, where resize events do not seem to trigger the observer callback in the right way.
This is the observer code, which updates the container height on every content size change:
const iframeElement = document.getElementById("container");
const content = iframeElement.contentWindow.document.body;
const resizeObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
iframeElement.style.height = `${entry.target.scrollHeight}px`;
});
});
resizeObserver.observe(iframeContent);
Here is a simple JSFiddle that clearly shows what I'm talking about: https://jsfiddle.net/ujxkre85/.
The containing iframe should adapt to the height of its content while this gets incremented. As you can see, it works fine on Chrome, but almost nothing happens running it on Firefox.
Is there something I'm not getting about the API or is Firefox missing something here?
Thank you.