mdl-ext
mdl-ext copied to clipboard
Implement ResizeObserver api
The ResizeObserver describes an API for observing changes to Element’s size.
ResizeObserver is explained here: https://github.com/WICG/ResizeObserver/blob/master/explainer.md
Resize Observer draft: https://wicg.github.io/ResizeObserver/
Hi! I just wanted to say that there are several issues in current implementation:
- document.resizeObservers - this list is not supposed to be available to the JS part as in the spec it's described under the section "Internal Slot Definitions". You can also check the native Chrome implementation which is available under the flag since v54 (Canary).
-
getBoundingClientRect - I think that it's better to avoid using gbcr at all as it's client rectangle is affected not only by borders and paddings but also by the CSS transformations.
Besides if are using it you will trigger notifications for inline elements (spec). As I see it the best thing to do is to use
clientWidth
andclientHeight
for the computations. This way you will only need to subtract the paddings data. - contentRect - it lacks right and bottom properties, where bottom equals to CSSHeight + paddingTop and right is a result of CSSWidth + paddingLeft.
- SVG elements - as for now they are completely ignored. Is this intentional?
Thanks. And please excuse me if I've wrote this ahead of time.
Hello @que-etc Thank you for your feedback.
- document.resizeObservers. I'll unexpose the array.
- getBoundingClientRect. I'll use clientWidth/Height as you suggests
- SVG. The idea was to leave SVG until everything else was completed
- contentRect. Completed with x,y width, height - but still with gbcr.
- Further I'll replace rAf with a combination of MutationObserver, windowresize and orientationchange.
The most recent code for my ResizeObserver is in this branch. It was by accident pushed to master some time ago. I havent taken myself the trouble to remove the code from master.
When I look through your repo it may seem that your ResizeObserver code is more mature than my implementation. I could probably find a lot of useful information there, or I can discard my code and use your library.
Regards