Shadow cut off on collection list pages

Bugs
1

So this is actually a two-fold issue that I’ve noticed whilst navigating around an app, I firstly noticed that when you’re viewing a collection list page that the collection types that have shadows (e.g. table, rows) have their shadow cut-off due to the structure of the DOM with the parent hiding the overflow from the table. This issue doesn’t occur on custom pages or record detail pages which have collections in them.

image
image1283×73 3.53 KB

The second part is that upon trying to see if there was an easy way to resolve via the dev console on my browser (to then try and replicate via custom CSS) I discovered that the scrolling performance of these tables is also severely impacted by something - I always thought this was due to the number of records in the table but by simply removing the overflow-hidden on the div with data-testid=“view-collection” the performance of scrolling is dramatically improved. Of course, this doesn’t provide your intended look & feel but I do wonder if you’re able to optimise things at all.

I’ve gone down a bit of a rabbit hole and even tested removing grouping from my tables to see if it was the sticky headers of the groups causing laggy scrolling but even without groups enabled there’s still a marked performance improvement by having the scroll at page level instead of table level.

2

Hi @EthosLuke - this is a virtualized table.

That means, if you have 1,000 rows in the table, we will only render ~20 or so, which dramatically improves table performance.

Removing the overflow-hidden would completely break this, which is why for your smaller amount of rows it probably wasn’t an issue.

There probably are performance gains to be made, for sure, but no quick wins as you’re explaining.

I hope this explains it a bit though.

We’ll see what we can do about the shadow, of course, if you figure out something do let me know

3

EDIT 2
@darragh - so it turns out this is actually a common issue with Chromium where it doesn’t utilise hardware acceleration when it should, we can force hardware acceleration by using translate3d on the element, simply adding the below CSS onto the div that the table is contained in resolves the problem:

-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

image

EDIT

Ok I’ve done further testing and the issue seems to be exclusive to Chromium-based browsers on Windows, it seems that the table virtualization just straight up doesn’t work in this scenario - while the table scrolling is “laggy” in this setup, no matter how fast I scroll I don’t see records load in, whilst when the table is performing as intended (i.e. mobile mode or non-Chromium browser) you can see blank/white space while scrolling as the records load in. I’ve tested Chromium-based browsers on MacOS and the issue doesn’t occur, likewise on mobile (Android) the issue does not occur, it is specifically on Windows with a Chromium-based browser.

With Google Chrome on Windows specifically there are actually permanent native scroll-bars on these elements which I think highlights that the virtualized table is just not working in this config.
image

and again like other Chromium browsers on Windows, toggling mobile emulation resolves the issue and the native scrollbar disappears
image

This may even be exclusive to desktop-based devices (or devices that have mouses plugged in), I’ve yet to test with a Windows laptop to see if the behaviour is different with a trackpad instead of mouse.

ORIGINAL
Thanks for the explanation.

I’ve done some further testing and it seems the laggy scrolling I’m experiencing might be some weird Chromium issue?

I’ve now tested with various browsers and devices and it seems the laggy scrolling only occurs on desktop Chromium-based browsers, using Firefox or any mobile browser and the issue doesn’t occur. Even weirder, going into dev tools on a Chromium-based desktop browser and then toggling on device emulation the scrolling performance is absolutely fine but the moment you toggle off device emulation it becomes laggy again.

Hard to capture on video but I’ve created the gif below where you can hopefully see that it’s a lot quicker & smoother at scrolling when I toggle device emulation on:

Recording2024-06-12131047-ezgif.com-video-to-gif-converter

4

Just in case anyone else is having the same experience, I’ve added the following to the custom code in the <head> tag as a temporary solution to both the scrolling lag & shadow cut-off:

<style>
    div:has(table) {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .collection-view-table {
        padding-left: .6rem;
        padding-right: .6rem;
        padding-bottom: .8rem;
    }
</style>