What do you think about the ResizeObserver entry object?

What is Resize Observer?

ResizeObserver is built on top of the same functionality of MutationObserver that allows you to attach a callback event to an element. When an element's layout content box changes in size the callback that you registered with the observer is called and it gets passed an entry object which has the layout information about the content box. This is a very useful API to use if you’re ever wanting to make any style or content changes based on the dimensions of the box even if the viewport doesn’t change (a.k.a container queries).

ResizeObserver also has the performance benefit that it passes you the layout information of the box so that you aren’t flushing the rendering pipeline in order to get these same dimensions since callback is called following layout and this information is already available.

What should the entry object structure be?

Aleks Totic and I are making some changes to ResizeObserver based on feedback we’ve already received from web developers, some of these improvements are being able to select which box you wish to observe, such as the border-box, content-box or scroll-box.

What we would like feedback from you on is this. When the observer for observing the border-box is triggered and the browser passes in the entry object to your callback would you prefer Option A or Option B.

Option A

    entry = {
        target: Element,
        contentRect: {/* v1 for back compat */},
        inline: 400,
        block: 400
    }

Option B

    entry = {
        target: Element,
        contentRect: {/* v1 for back compat */},
        contentBox: null,
        borderBox: {
            inline: 400,
            block: 400
        },
        scrollBox: null
    }

Vote now!

There are two ways to vote, you can vote in the YouTube video embedded above by clicking the 'i' in the top right hand corner, or you can vote via Office forms here.