Scope Rapid Diffs tab pane caching to the diffs pane

What does this MR do and why?

There's an intermittent, Chrome-only bug on merge requests where the scrollbar thumb grows too long and wheel/trackpad scrolling can't reach the bottom of the page — roughly 40% of the page becomes unreachable, even though the layout itself is correct (resizing the window fixes it). The root cause is a CSS rule meant to keep the diffs pane's rendering state warm when switching tabs: it was applying content-visibility: hidden to every merge request tab pane once hidden, not just diffs. The pane you navigate away from (e.g. Overview) stays in the scroll container as a collapsed subtree, and rapidly switching tabs while diffs are still streaming in trips a Chromium compositor bug that freezes the scroll container's height at that departed pane's former size. This MR scopes the rule to the diffs pane only, keeping the performance benefit for diffs while removing the trigger for the other panes.

Arm Reproductions
baseline (rule applies to all panes) 14 / 32
rule removed entirely 0 / 32
rule scoped to the diffs pane (this MR) 0 / 21
rule scoped to the Overview pane only 11 / 20

Measured against merge request 231279 on gitlab.com in Chrome 152, interleaved runs of the same reproduction script; p = 1.3e-3 for the scoped-to-diffs arm vs baseline.

References

Closes #597048 (closed)

Related to #596236 — raised in the feedback thread here: #596236 (comment 3713030457)

Related to #627466 (scrollbar length mismatch)

A Chromium bug is being reported upstream separately.

Screenshots or screen recordings

Before After

Unreachable: 4,387 of 10,935 px — 40% of the diff cannot be scrolled to.

Reaches the end: 11,668 of 11,668 px, thumb proportional.

Both recorded on gitlab.com against merge request 231279 in Chrome 152 with the same recipe: start on Overview, five quick tab switches while the files stream in, hover the scrollbar, then scroll slowly to the bottom. The fix can't be deployed to production for a recording, so the "after" clip was made on gitlab.com with an equivalent stylesheet override applied to the live page — the inactive non-diffs panes forced to display: none; content-visibility: visible.

How to set up and validate locally

  1. Use Chrome.
  2. Open a merge request with at least 10 changed files, on the Overview tab.
  3. Click Changes, Overview, Changes, Overview, Changes in quick succession (about 0.4s apart) while the files are still streaming in.
  4. Hover the scrollbar - the thumb is too long.
  5. Scroll to the bottom of the page - it stops part-way through a file.
  6. Resizing the window repairs it.

This doesn't reproduce every time — roughly 1 in 2 attempts on the test merge request.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Stanislav Lashmanov

Merge request reports

Loading
Loading