-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add BoundingClientRectObserver #9104
Comments
This would be really great. It has been a pain to write code that depends on the realtime value of some element's bounding client rect, and the only simple way to do it today is in a poll loop, f.e. reading it every animation frame even if it hasn't changed, which currently leads to a lot of performance cost. It could be possible that browsers could optimize the return value, memoizing/caching it, to reduce the performance cost, but this would still not be aligned with the other But there's a problem with adding new
|
@trusktr Thanks for this review! I wasn't aware of most of the mentioned issues. From my perspective, it nearly sounds like browser-side implementation challenges... I'm not sure if I get why observing the size of something could cause more WebGL renders. Do we assume that the observing callback could trigger the draw? Or is it something more subtle? I'm also not sure how much of what you're saying depends on your experience with the implementation details of real browsers; from my perspective, nothing would need to be drawn four/multiple times because of the observers, but in the worst case the layout would need to be calculated many times if one of the callbacks affected the layout. The JavaScript code hardly ever wonders about the rendered pixels. But that's just the perspective of a web developer who doesn't need to think too much about browser's paint cycle most of the time. |
Isn't this solved by https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API? Also, this would benefit from reading through https://whatwg.org/faq#adding-new-features and applying it. Thanks! |
@annevk I can't see how Intersection Observer solves this problem, as it doesn't call the observer when the relevant element moves when it's fully visible. Which points of the checklist do you have in mind? I would agree that the proposal would benefit from example use cases. |
IntersectionObserver does not solve this problem (I've tried and tried, and if it is solvable, it is far too complicated for anyone's good). |
Here's a related issue describing a problem that would need to be solved for The more of these we add (which I think would be super useful) the more this problem will become pronounced. Adding Alternatively |
It's easy to query the bounds of a given element by calling the getBoundingClientRect method on that element.
It's also easy to observe the size of a given element, by using the ResizeObserver class.
What's nontrivial is observing the bounds of a given element. There are tricks to do something that works part of the time and has acceptable performance, or do something that works in general, but has a crappy performance (like polling
getBoundingClientRect
in every animation frame).I propose to add a new utility called
BoundingClientRectObserver
, which does exactly what's in its name, i.e. allows observing element's bounds (the thing that getBoundingClientRect returns).Usage:
I tried to search for existing efforts to define such utility, but I found none. Please let me know if there already is a proposal for such an observer!
The text was updated successfully, but these errors were encountered: