Resize events needed?

[greggman]

Sorry I'm out of the loop but this issue came up before and I have no idea if it has been addressed

Assume you want to make a custom graphing element <graph>. To do this you use a canvas element wrapped in whatever is needed to make it a custom element. Anytime the element changes size the element's code needs to re-render the graph to fit the new size of the element.

As far as I am aware this is currently impossible. The only resize element is on window and there are plenty of other reasons an element might change size from css animations or other settings to flexboxes. A good example is Chrome's or Firefox's dev tools. Both of them have areas whose sizes can be changed without changing the size of the window.

For example if the graph on the right was a custom element it would have no way to know it had been resized. It's only options are (1) require the user to notify it or (2) poll its size.

Has this been addressed? One solution would be an element level resize event. Maybe there are others.

[WebReflection]

Just my 2 cents, I think notifying or updating any sub element about changed size should be the very first concern of any resizable panel.

You can either graph.addEventListener('resize', graph.update) and dispatch such event while resizing the panel, or simply rPanel.on('resize', rPanel.updateChildren)

That being said, I agree that a mechanism to know that could be handy is some static/fixed size layout, but it should eventually be part of the DOM specification and not part of the WebComponents specification, or not only, IMO.

[hayatoito]

Yeah, it sounds that this should be handled by DOM Standard.
Let me close this issue. Please feel free to file a bug to DOM Standard.

[annevk]

Oh, I just asked @greggman to open an issue here rather than in DOM: whatwg/dom#149. I don't see why resize events would have anything to do with the DOM standard. They're part of rendering. So either here or CSS. I figured here would be a better start since we've been discussing scenarios like this for a while, no?

[hayatoito]

I got it. I wrongly used the term of DOM Standard. I probably meant UI events: https://w3c.github.io/uievents/.

It's okay to discuss this issue here for a while.

[andyearnshaw]

resize probably shouldn't be an event, I think it would suffer some of the same issues that DOM mutation events have (performance, infinite loop footgun).

I was thinking recently about this problem for custom elements, many of them would need to know when they've resized, but there are use cases outside of custom elements too. One of the ideas I had was an observer for element rendering that covers more use cases than just detecting size changes. For example, the hypothetical observer could trigger for elements that are obscured by other elements or are scrolled out of view, which would allow pausing of animations or videos, skip complex drawing routines or disable server polling, etc. However, without being familiar with browser internals, I can't really know how feasible this kind of API would be.

What do others think?

[domenic]

Sounds like IntersectionObserver: http://rawgit.com/slightlyoff/IntersectionObserver/master/index.html

[andyearnshaw]

Awesome. Avoiding scroll events for visibility checking was one of the main use cases I wrote in my notes, as well as detecting visibility in a cross-domain iframe. I'll definitely try it out when it hits the Chrome dev branch. Thanks @domenic.

[b-strauss]

I think for webcomponents to really work in a isolated fashion, two things are needed: resize events on elements, and element queries. I've yet to see a sound proposal on element queries, but i don't understand why we don't have a resize event yet.

[domenic]

It seems like IntersectionObserver takes care of these use cases.

[dontcallmedom]

@domenic I was looking into this as I was developing a Web Component and couldn't find the obvious way to use IntersectionObserver to re-layout my component. On the other hand, I see some work on a ResizeObserver.

Is IntersectionObserver sufficient, and if so how? or is ResizeObserver what is needed to help here?

Thanks!

[domenic]

@dontcallmedom I think you're right. I mistakenly thought IO was sufficient, and then when Andy said "awesome, this works for my use cases", I mistakenly thought it'd work for the other use cases in this thread as well. But indeed, for most of the use cases in this thread, RO is what you need.