Display glitch in Comparison Table

[Howard-Xuan]

Description

Hi To, while checking through the comparison table function of the webapp Simón noticed a display issue. When he clicked to reveal the Original Text and Source for a specific variable, all of the text below that row started to rapidly stutter up and down. I have attached a video Simón captured of the issue in the reproduction section, please let me know if you can't see it. When he zoomed in using his browser setting, the text stopped moving.

Does the issue have to do with the default settings regarding placement of the "See below" button? If there is anything we can do with our data on the back end to avoid this display error please let us know.

Expected Behavior

Comp.table.glitch.2.mp4

Reproduction

Comp.table.glitch.mp4

Issue.goes.away.with.zoom.mp4

[tohuynh]

If there is anything we can do with our data on the back end to avoid this display error please let us know.

No, I don't think so.

The cell contains text that is initially truncated, meaning only a portion of the text is displayed, and the rest is hidden. This truncated text includes many newline characters, which increase the overall height of the text block. If the total height of the text exceeds the maximum height set for the cell, the cell becomes scrollable to accommodate the extra content.

However, there’s a conflict – a “tug of war” – happening because the cell is trying to maintain a constant maximum height, while the actual height of the text wants to expand beyond this limit due to the newline characters. This results in the cell switching back and forth between being scrollable and not scrollable.

When Simón zooms out on the page the truncated text becomes smaller, reducing its height. Consequently, the truncated text fits within the maximum height of the cell, and the cell with the truncated text no longer needs to be scrollable.

I can take a look and fix the issue sometimes next week.

[tohuynh]

I deployed fix to staging web app.

The issue arises when truncated text contains newline characters. The current code does not account for these characters, leading to incorrect height calculations for the truncated text. Consequently, this sometimes causes the calculated height to slightly exceed the maximum table cell height, resulting in a "tug of war" effect—flickering between scrollable and non-scrollable states.

The ideal solution is to include newline characters in the height calculation for the truncated text. However, implementing this change is complex and requires approval from others, as I did not originally write the code. And I would to have upgrade the web app to use this change, a lot of other changes that comes with it. This could create unforeseen conflicts/issues between the web app and the new changes.

As an interim solution, I have decided to remove newline characters from truncated text, ensuring the height is calculated correctly. Of course, newline characters are displayed when the text is expanded. I have verified this adjustment across several table cells and observed no flickering. Please test the staging web app and confirm whether the issue persists. If no further flickering is detected after 1 or 2 QA spot checks by the team, I will proceed to deploy the fix to the production web app.