Don't detect when object went "display: none" about element-resize-detector HOT 6 CLOSED

Hi,

The resize detector only detects size changes, and does not detect visibility. However if an element is invisible (display:none for instance), and then changes, the detector will emit resize events as soon as the element gets visible again.

I hope this clarifies some things.

PS. I really recommend using the scroll approach, as it is far superior. I am going to deprecate the object approach soon :)

from element-resize-detector.

@wnr Thank you! I created a MutationObserver to detect the css display change. Anyway, thanks for this awesome code!!

from element-resize-detector.

@wnr I'm encountering this issue when using the scroll strategy. When display: none is removed from the observed element, I see that

startanimation triggered.
Element rendered.

is printed to the console, however no resize event is emitted.

I've created a Plunker app to reproduce.

Does this look like a bug?

from element-resize-detector.

Hi, thank you for the plunkr - it helps a lot. It seems to behave as expected for me. Could you describe a bit more in detail which steps you are doing, the expected behaviour and the actual behaviour?

from element-resize-detector.

I've updated the Plunk to show a bit more output when you click the Show/Hide button.

When you click the Show/Hide button, a display: none style is either added or removed on the "chart" div. When the div is hidden via display: none it has a height and width of 0. When the display: none style is removed (and the element is now visible), it has a size of approx. 600 x 100. I would have expected that because the element has resized, that the resize listener callback would be called, resulting in "Resized: 600x100" to be printed to the console. Right now I'm seeing that the resize listener is only called when the element is first rendered.

from element-resize-detector.

Ah I understand. Actually, it is by design that it works like this. The size of the div is undefined while it is unrendered (even though some browsers report it as 0), so it remembers the last size it had and checks if the size when it gets rendered is the same or not. Since the size goes from 600x100 -> undefined -> 600x100, no event is fired. Does this makes sense?

from element-resize-detector.