Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does ResizeObserver invoke initially on page load?

Seems when I pass a node to ResizeObserver.observe() on DOMContentLoaded event, it invokes immediately. Is it considered a normal behavior?

like image 723
chzzh Avatar asked Feb 02 '20 12:02

chzzh


People also ask

What does ResizeObserver do?

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.

What does resize observer mean?

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.


1 Answers

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 ;).

like image 115
Kaiido Avatar answered Sep 29 '22 10:09

Kaiido