search

marcj / css-element-queries

CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
http://marcj.github.io/css-element-queries/
MIT License
4.27k stars 487 forks source link

Unexpected call of callback after attaching ResizingSensor #276

Closed misha-erm closed 4 years ago

misha-erm commented 4 years ago

Hello,

As I can see the callback gets called as soon as I attach ResizeSensor. It happens because of changing the scrollTop property of shrinked/expanded elements as their are subscribed to 'scroll' event already. https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js#L219

Is it expected behavior? I supposed that callback should fire only when something changes. I use ResizeSensor to render some charts and this behavior cause extra rerenders.

Thanks in advance

marcj commented 4 years ago

Yes, we lately added that because hidden elements made some issues, see https://github.com/marcj/css-element-queries/issues/265#issuecomment-489088124. I'm afraid there's currently no way around that unless we break consistency. If you have any idea to solve that let me know.

misha-erm commented 4 years ago

hm...

For sure I can workaround this on my side and just do not call refresh if it's the first time the callback gets called.

According to the issue you sent we have a similar scenario and we just subscribe to document visibility change.

Do you know any other case when triggering sensor's callback initially is desired? Maybe this behavior isn't really used widely?

marcj commented 4 years ago

Do you know any other case when triggering sensor's callback initially is desired?

We had several issues from users requesting to initially call the callback so they get the current dimensions, and I find this plausible, especially if your element starts off hidden (which you most of the time can not control), so you get notified when the element is displayed or its dimension is changed. Kind of like a starting point. If we remove that you have more work for common use cases like:

  1. Reading initial dimensions
  2. Check if element is invisible

If you would use the ResizeSensor as initiator for the first and all subsequent renders then this workflow seems fine. If you have own boilerplate to check the dimensions and visibility for the first render it seems unnecessary.

misha-erm commented 4 years ago

Okay, makes sense.

I'm closing the issue then and will try to use it as initiator