[resize-observer] Browsers trigger on initial observe of disconnected element, contrary to spec

[joliss]

There seems to be disagreement between the resize-observer spec and browser implementations as to whether observing a disconnected element should trigger an immediate callback, as in the following code:

let disconnectedEl = document.createElement("div");
let observer = new ResizeObserver((entries) => {
  console.log("Got callback:", entries);
});
observer.observe(disconnectedEl);

Behavior according to resize-observer spec

The resize-observer chapter § 1. Introduction lists the following among the "interesting facts":

Observation will fire when observation starts if Element is being rendered, and Element’s size is not 0,0.

The rest of the spec does seem to agree with this conclusion: Section § 3.1. ResizeObservation example struct says that lastReportedSizes is initialized to [(0,0)], and the isActive() function compares the element's currentSize (which is its computedSize) to that. But the computedSize of a disconnected element should be 0,0, and thus isActive() should be false.

So my reading is that the observer should not immediately fire, because the element isn't being rendered yet.

Current browser behavior

Running the code above, Chrome, Firefox and Safari all do immediately fire, printing

Got callback: Array [ ResizeObserverEntry ]

where the box sizes in the ResizeObserverEntry array are indeed all 0,0.

Suggested resolution

I'm not sure whether the browser behavior should be changed, or the spec should be brought in line with browsers' actual behavior.

[Loirooriol]

See resolution in #3664 (comment)

#7808 is discussing some details