[BUG] Items list is not loaded when using createPortal and window.open (Chrome)

[HovhannesB]

Describe the bug
When I open a new window and add Virtuoso with createPortal, virtuoso-item-list is empty. I could reproduce this issue on Edge, Chrome. Firefox works ok. The browser should be maximized. (window.open should open a new tab and focus it instead of popup)

Reproduction
https://codesandbox.io/s/beautiful-kate-ftj8jl?file=/src/App.js

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/beautiful-kate-ftj8jl?file=/src/App.js
2. Maximize Chrome
3. Press "Click Me"
4. You'll see a new tab with "Virtuoso List" text in it
5. Go back to codesandbox tab and again open the opened tab
6. You'll see the populated list

Desktop (please complete the following information):

• OS: MacOS, Windows can behave unexpectedly.
• Browser Chrome, Edge

Additional context
I tried to find the cause of the issue (really interesting case for me) and the issue was connected to ResizeObserver. As far as I understand (not in Firefox this time 😄), ResizeObserver doesn't work when the element is not visible or maybe the tab is not visible. I added
callback(elRef) at line 25 and it started to work.

react-virtuoso/src/hooks/useSize.ts

Lines 12 to 26 in 12e53e5

	if (typeof ResizeObserver !== 'undefined') {
	const observer = React.useMemo(() => {
	return new ResizeObserver((entries: ResizeObserverEntry[]) => {
	const element = entries[0].target as HTMLElement
	if (element.offsetParent !== null) {
	callback(element)
	}
	})
	}, [callback])
	callbackRef = (elRef: CallbackRefParam) => {
	if (elRef && enabled) {
	observer.observe(elRef)
	ref.current = elRef
	} else {

[petyosi]

Now that's a fun case! First time I see a portal in another window. My gut feeling says that maybe the resize observer from the first window is not working in the other one? Since you've already investigated that, I'm happy to accept a PR.

[HovhannesB]

I did other change which I missed in the description. I also commented requestAnimationFrame which are not working when the tab is inactive. I'll try to uncomment requestAnimationFrame and find another way.

[paulincai]

@petyosi I was not sure whether I should open a new issue. I use Virtuoso 4.6.0 in a div all works fine and it did work ok for a long time on previous versions. When I update the package to 4.6.2, development works ok however the production build doesn't show any items. Revert back to 4.6.0, all ok.

[petyosi]

@paulincai Is this related to this issue? Not sure I follow.

[paulincai]

@petyosi I wouldn't know whether this is related to the same issue. Would be interesting to know if the issue above exists in 4.6.2 and similarly not in 4.6.0.
Later ... ok, I think the issues are not related.

[HovhannesB]

@paulincai this issue exists even in 1.5.3 version (I didn't tested with earlier versions).