search

wnr / element-resize-detector

Optimized cross-browser resize listener for elements.
MIT License
1.32k stars 118 forks source link

Don't detect when object went "display: none" #51

Closed szanata closed 8 years ago

szanata commented 8 years ago

Hey, I notice when some listened component goes hidden, the event is not trigger, I'm using the object approach.

Thank you!

wnr commented 8 years ago

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 :)

szanata commented 8 years ago

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

FrankManns commented 7 years ago

@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?

wnr commented 7 years ago

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?

FrankManns commented 7 years ago

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.

wnr commented 7 years ago

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?