ResizeObserver on iframe body behaves differently on Chrome and Firefox

Question

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.

Answer 1

Firefox has a bug that is described here https://bugzilla.mozilla.org/show_bug.cgi?id=1689099

ResizeObserver callback doesn't reliably fire, when observing an element in an iframe subdocument (with the observer registered in outer document)

So probably using MutationObserver is a best option.