Row misalignment on ListGrid with frozen columns

[jclaxton]

The bug previously reported here seems to be reoccurring. In the code sample attached, it's a bit inconsistent, but I get it break by scrolling quickly from the bottom to the top with the scrollbar, then going up/down a bit the the scroll wheel (screenshot attached).

The data I used for the sample is in an xml file that exceeds the file size limit for this site (it's ~300kb). Is there some other way to get this file to you?

SmartGWT Version: v13.0p_2024-02-09/LGPL Development Only (built 2024-02-09)
Chrome 121.0.6167.140 (Official Build) (64-bit)

Thanks,
John

[Isomorphic]

That previous post did not identify a bug, but a usage issue.

In this new code there is also a usage issue: you can't turn off virtualScrolling with fixedRecordHeights:false (unless you are also prepared to turn off incremental rendering, which you clearly can't in this case - too many records). Reverse that setting and your problem should be corrected.

For future reference, if you have a large data file, you can:

1. stick it on Dropbox or any similar file hosting service (S3, etc)

2. email it if it's confidential

[jclaxton]

Ah, right, I meant to link to this issue: https://forums.smartclient.com/forum...ls-in-listgrid

I missed that virtual scrolling line, it was left over from an old test case, my real app doesn't have that.

But removing that line doesn't fix this test case, either. It's harder to break, but I can still break it. Try scrolling to the bottom, jumping up to the top by dragging the bar, then scrolling down several times with the wheel. Might need to do that whole cycle a couple times.

I attached a copy of the code without the virtual scrolling line. And here's a Google Drive link to the data.

[Isomorphic]

Still need some information:

1) what OS are you running Chrome on?

2) what skin are you testing with? Are you able to reproduce with a stock skin - no other CSS?

3) are you completely unzoomed? See the Browser Zoom overview - most browsers report bad sizes when zoomed, and we have already maxed out what we can do to work around this. It would be unsurprising to see some minor misalignment after jerking the scrollbar around while zoomed

[Sanmargar]

Sure, this might not help much, but I can confirm that I sometimes also see shifted rows. It happened in the showcase as well https://smartclient.com/smartgwt/showcase.
It's definitely related to frozen columns and probably setAlternateFieldStyles(true).
The issue also seems to occur more frequently when there's a picker in the row.

[Isomorphic]

It's been more than 6 years since we've seen a valid test case showing row misalignment (that is, where none of the rules mentioned above were broken).

If you can actually reproduce this problem in a Showcase example, that would be quite shocking, so please do share details!

[jclaxton]

1) what OS are you running Chrome on?
Windows 10

2) what skin are you testing with? Are you able to reproduce with a stock skin - no other CSS?
Yes, I'm using Enterprise.

3) are you completely unzoomed? See the Browser Zoom overview - most browsers report bad sizes when zoomed, and we have already maxed out what we can do to work around this. It would be unsurprising to see some minor misalignment after jerking the scrollbar around while zoomed
Yes, I'm completely unzoomed.

[Isomorphic]

Hi there, this is now being looked at again (as per our arrangement).

So far, we have been able to see the misalignment just once or twice, and it required dynamically changing zoom without reloading (which our docs explain as being not supportable at the moment, see https://smartclient.com/smartclient-...p..browserZoom), and even then, several minutes of vigorously scrolling around were required.

We wanted to check whether your method of reproducing required dynamically changing the zoom? If so, this is unfortunate, but a non-bug (or that is, there is no way for us to address it - it requires a browser fix). Or recommendation from the docs is to ask the end user to reload if they change zoom.

Note, we are still trying to find a way to reproduce this without dynamically changing zoom.

[Sanmargar]

Today, while browsing a document in GoogleDocs, it suddenly got messed up. It looks quite similar to what we were talking about here.
The selected cells don't match the actual cells. The column headers also don't align with anything. Rows also.
he lines on the right and at the bottom are also a mess.

So it could be a browser error that sometimes occurs.

[jclaxton]

https://drive.google.com/file/d/1cTQ...ew?usp=sharing

Thanks for pursuing this. For some reason I didn't get an email when you posted last.

In all of my examples, I have not been using any dynamic zoom. I don’t expect that to be supported.

I think the misalignment is a related to another issue where rendering fails. The link above is a video where I’m running the page in TestModule (attached previously) inside my larger app's main page. I guess there is a bit of overhead there, but I made sure to disable all custom styling and the Chrome profiler doesn’t show anything significant from my code.
You can see after just a bit of scrolling, the render fails and whole grid is blank. Scrolling more shakes it loose. It’s inconsistent, but there are a couple patterns that help recreate it:

1. Open the page in a new tab. It seems easier to trigger in a fresh tab. As you refresh the page in the same tab, it gets better. The render stutters, but it eventually succeeds. Maybe something is getting cached. It also gets better if you produce the error and then shake it loose.
2. I’m less sure about this one, but it seems worse when you keep your mouse above the frozen columns and use the scroll wheel.

In my full app, the misalignment is usually preceded by this render issue. Say you quickly pull the scroll bar down twice. After the first pull, the render stutters or fails completely. You scroll again and the render reruns and succeeds, but something has been thrown off from the stutter and rows are misaligned.
The misalignment is probably easier to trigger in my full app because we have some custom styling and are overriding ListGrid.getCellCSSText(). That probably adds more latency to the render. (Although I’ve run a profiler on it and that code seems relatively fast.) I’m hoping fixing this render issue will fix most of the misalignment in my full app.

[Isomorphic]

Hi jclaxton, it looks like we can't access your recording without specific access for certain Google accounts. Simplest thing would be to email it to support@isomorphic.com. Note that it won't work to grant access to the file to support@isomorphic.com, as that's not an actual login, just an alias.

As far as the problem itself, we'll make another attempt at trying to get it to happen, this time without changing zoom.

Just to confirm: you have never seen this in any other browser than Chrome, right? It looks like Sanmargar above (who is a helpful user but doesn't work for us - thanks Sanmargar!) pointed out that Google's own Sheets becomes intermittently misaligned. This may indicate a deep Chrome bug.

While we can go as deep as you want on that - including compiling Chrome with debug annotations and drilling into the Chrome code itself to find the problem - it might not be worth doing. Another approach would be to sit on the problem for, say, 2 Chrome releases and then revisiting.

[jclaxton]

I put the video on Youtube here (it's unlisted).

I just tried Edge (124.0.2478.80) and Firefox (125.0.3), and they both show the same issue. When you look at the video, it's quite different from Sanmargar's screenshot, they seem like separate issues.