Comments are not loading when scrolling

[Kristina-Dvorski]

Expected behavior: Comments should be loaded when I am scrolling through.

Actual behavior: They are not loaded, instead I have white space.

Related Issues: Yes, but the problem is not solved. The bug is not in CSS on my side, because with normal Coral CSS the bug is also there. Please, read the following message (#4371 (comment)). I would appreciate that because, all users of my web-page have that problem and it is very unconformable.
Thank you for your time.

Versions:

• NodeJS: 14
• NPM: 8.0.0
• MongoDB: 4.2
• Redis: 3.2
• Browser: Edge 118.0.2088.46
• OS: Windows 11

[losowsky]

Thanks Kristina for reporting this, and we're sorry this is happening. We run many variations of implementation across several CMSs and sites and aren't seeing this happen – we'll look into it more deeply soon and let you know.

[losowsky]

@Kristina-Dvorski Can you also confirm you're running the latest version of Coral?

[Kristina-Dvorski]

Thank you, for taking your time to check my issue. Yes I am running the latest version of Coral (8.5.3). The Bug is happening when the container with comments is on position: fixed, when I change to position: relative the container is in the Page but the bug is not there.
I hope this helps

[Kristina-Dvorski]

Here's a showcase of the issue with a clean installation of Coral and no custom CSS other than what is included in the <style> tag of this page: http://159.89.1.139/
Thank you for your time

[losowsky]

Thanks Kristina. We have it in our queue to look into.

[losowsky]

Hi Kristin,

We've looked into it and I'm afraid we can't support putting Coral inside a fixed div due to limitations with Virtuoso. It is possible through some slightly hacky means (The Verge did something like that to make it work) but it's not something that we support out of the box.

Sorry I don't have a better answer!

[Kristina-Dvorski]

Hi @losowsky,

thank you for your time and effort.

Have a nice day

[oliver-dvorski]

For future users dealing with this bug - here's one way to patch the issue. Apparently the Virtuoso list will re-render when the browser window fires a resize event. Therefore, this makes the problem go away:

document.querySelector('.coral-scroller').addEventListener(
    'scroll',
    () => window.dispatchEvent(new Event('resize')),
    { passive: true }
);

In the above snippet, .coral-scroller would be the scrolling/overflowing element.