ResizeSensor does not trigger if target element is hidden the shown back on

[martynasma]

If element starts off as display: hidden, then revealed by setting style.display = "block" the sensor triggers fine.

However, if element is initially visible, then hidden by setting style.display = "none", then shown back on style.display = "block", the sensor does not trigger.

This seems like an inconsistency, as in both cases actual size changed (since hidden elements do not have size).

Example:
https://codepen.io/team/amcharts/pen/9f21d956ae4391ef918c21670b62f806?editors=0010

[marcj]

Works in newest Chrome/Firefox here. Which browser do you use?

[martynasma]

Chrome.

Try reloading CodePen tab. Then hitting hide button, then unhide.

[marcj]

So, to me everything works correctly. If you expect to get a resize event upon hiding/unhiding, I think that expectation is not valid since hiding/unhiding itself does not change the dimension of the element and thus no event is triggered. If you start the element hidden and then unhide, the sensor is triggered because we had no dimension initially to check against. When you start the element visible, we have initial dimensions value, so then you hide and unhide without dimension changes, we won't get any event about that. The sensor only is notified when you change the dimension while it's hidden and then unhide it.

To make the behavior more consistent, I'd vote for triggering the sensor callback initially with the current dimensions. Wouldn't that fix your issue?
Like so: https://codepen.io/anon/pen/LoPEay

TL;DR You can not detect hiding/unhiding with the ResizeSensor when no actual dimension change happened.

[martynasma]

I understand. Triggering sensor initially does not solve the broader issue, I'm afraid.

Setting display: none causes size of the target element to change to 0x0. And going back to display: block causes it to re-gain the original dimensions, hence my assumption that it should trigger a sensor event.

If you check offsetWidth of the hidden element it will result in zero.

[marcj]

I don't understand your use case. Can you explain a bit what you want to achieve?

Setting display: none causes size of the target element to change to 0x0. And going back to display: block causes it to re-gain the original dimensions, hence my assumption that it should trigger a sensor event.

The actual element stays the size for the engine. Of course, when you query the width using offsetWidth etc it will then be calculated and returns 0, but we don't have any events about that.
The actual element isn't changed in size, and I'm afraid it has no big value to detect whether a element is hidden, because changing its styles/content won't be seen anyway. So, let me know your use-case, maybe we can find an alternative.

[martynasma]

The use case is simple:

1. Have initial element.
2. Hide it.
3. Make some modifications in it that depend on its sizing.
4. Unihide it (obviously modifications are off because they were based on measurements 0x0).
5. Detect such change by sensor and correct modifications.

In real-life this translates into a very possible situation:

1. Create an SVG chart in a visible tab. The chart is live with its data constantly being updated.
2. Switch to other tab (chart's tab is now display: none).
3. Data updates while chart is invisible.
4. Switch back to chart tab.
5. Since no resize detection happens we now have a crippled chart. If resize event would be triggered, we would be able to update chart layout.

Since toggling of a container might originate from anywhere (we don't control it), we need a way to universally detect it, just like we detect container size changes thanks to ResizeSensor.

[marcj]

2. Hide it.
3. Make some modifications in it that depend on its sizing.
4. Unihide it (obviously modifications are off because they were based on measurements 0x0).

Why do you run modifications on an element that is hidden? You could check whether that element is hidden by checking offsetWidth===0, and simply don't modify anything and skip everything if that's the case. So when the element unhides automatically, everything stays the same. If the element got resized meanwhile, you will be notified by the ResizeSensor and modify accordingly.

[martynasma]

Gotcha. We'll find a way to work around this. Just thought that it would make sense for ResizeSensor to register this type of scenario as well.

Thanks for looking into this!