Closed szanata closed 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 :)
@wnr Thank you! I created a MutationObserver to detect the css display change. Anyway, thanks for this awesome code!!
@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?
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?
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.
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?
Hey, I notice when some listened component goes hidden, the event is not trigger, I'm using the object approach.
Thank you!