Vue 3 + ResizeObserver (polyfill) not working as expected

587 Views Asked by At

I'm building a component in Vue 3 and using resize-observer-polyfill to observe my container size changes.

While converting stuff from prior vue 2 code to vue 3, I ran into an issue where ResizeObserver simply stopped working. It only triggered once, as I called .observe() and then stopped triggering.

I have pinpointed the issue to .observe call, which is made from onMounted lifecycle hook, like so:

onMounted(() => {
  console.log('a', container.value, getComputedStyle(container.value).position);
  resizeObserver.observe(container.value);  // <-- not working
  nextTick(() => resizeObserver.observe(container.value));  // <-- not working
  setTimeout(() => resizeObserver.observe(container.value), 1);  // <-- working! yay!
});

While I'd generally be happy about just leaving it in its newly working state, I can't help but wonder what it the cause of this required delay in .observe() call.

I have printed out container's (it's a ref to a div) style and its position was relative, display was block even without the delay.

So why do I have to wait to start observing if everything seems to be in place already?

0

There are 0 best solutions below