It throw error if target element inside a iframe on Chrome about resize-observer HOT 11 CLOSED

Hey @minhtranite thanks for the info. Looks easy enough to sort. Will look into it!

from resize-observer.

Hey @JayaKrishnaNamburu yep there is a bug here. So many ways to create and take ownership of elements :)

from resize-observer.

Great! I'm not sure if you've looked at the code yet but it's probably best to just test if el instanceof Element first and return. If not, continue to try and find the document/window scope. This is the current issue for your use case, as the util cannot find out what the defaultView is.

from resize-observer.

Hi @JayaKrishnaNamburu your problem on the demo above easy to fix by use iframe document to create element instead of top windown document.

The demo for the fix: https://codesandbox.io/s/observer-330-forked-39xy9?file=/src/App.tsx

from resize-observer.

This has another issue where the document has no listeners for observation, so the observation is only noticed when the scheduler is run in the main document. This could also be fixed with changes from #42

from resize-observer.

@minhtranite as a workaround for now, you can propagate the events to the parent window. It's pretty nasty, but will get it working 😬

Here is an example based on your sample

// boxEl exists in an IFrame
this.boxEl.addEventListener('keydown', (e) => {
  const event = new Event(e.type, e); // proxy event
  event.preventDefault(); // try not to do anything unexpected
  window.dispatchEvent(event); // dispatch in main window
});

from resize-observer.

Hi @TremayneChrist thanks for the great package 🎉,
I am using this for sometime. But, when i upgraded from 2.3.0 to 3.3.0 the isElement check breaks for me. The main difference i can find from the above codesandbox example in description to my use-case is

Example above uses a ReactPortal to render the data, where in this case the portals use iframe just as a kind of placeholder to render stuff. But managed by React. But when we create a DOM element and try to add to the iframe. That's when the check breaks.

Here is the same example with two different checks with different versions
@juggle/[email protected] -> https://codesandbox.io/s/observer-330-ucif1
@juggle/[email protected] -> https://codesandbox.io/s/observer-230-vl0gi

from resize-observer.

Yes agreed, I will try to take a look if i can fix this check for both the use-cases and general use-case in common 😄

from resize-observer.

Just seen your PR :)

from resize-observer.

Great! I'm not sure if you've looked at the code yet but it's probably best to just test if el instanceof Element first and return. If not, continue to try and find the document/window scope. This is the current issue for your use case, as the util cannot find out what the defaultView is.

Yes yes, do you think the PR is a valid fix ? or can i close it :)

from resize-observer.

Yes, and this behaviour is only in chrome alone 😄

from resize-observer.