Seems when I pass a node to ResizeObserver.observe() on DOMContentLoaded event, it invokes immediately. Is it considered a normal behavior?
The ResizeObserver interface reports changes to the dimensions of an Element 's content or border box, or the bounding box of an SVGElement . Note: The content box is the box in which content can be placed, meaning the border box minus the padding and border width.
The Resize Observer API provides a performant mechanism by which code can monitor an element for changes to its size, with notifications being delivered to the observer each time the size changes.
Yes, this behavior is per spec (ref.):
Observation will fire when watched Element is inserted/removed from DOM.
Observation will fire when watched Element display gets set to none.
Observations do not fire for non-replaced inline Elements.
Observations will not be triggered by CSS transforms.
Observation will fire when observation starts if Element is being rendered, and Element’s size is not 0,0.
So in your case, either the element was not yet in the DOM and case 1 will make it fire, either it was already, and case 5 will (though in DOMContentLoaded, that should be 5 ;).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With