1563360 - End key does not scroll all the way to the bottom of BMO page

Status: RESOLVED FIXED

(bugzilla.mozilla.org :: User Interface, defect)

Description

[Botond Ballo [:botond]]

STR

1. https://bugzilla.mozilla.org/show_bug.cgi?id=1549292
2. Once the page is loaded, press the End key.

Expected results

The page is scrolled to the bottom.

Actual results

The scrolling stops part way to the bottom. This happens intermittently but with a high frequency.

Comment 1

[Botond Ballo [:botond]]

Regression window goes all the way back to 2017:

https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=0b77ed3f26c5335503bc16e85b8c067382e7bb1e&tochange=84762dbeb5380461fe27f0afa0e27e8ba9dd3b01

I find it hard to believe this issue has been around for 2 years and no one has spotted it, so perhaps it was actually exposed by a recent change to the site? cc Kohei.

Comment 2

[Botond Ballo [:botond]]

(In reply to Botond Ballo [:botond] from comment #1)

Regression window goes all the way back to 2017:

https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=0b77ed3f26c5335503bc16e85b8c067382e7bb1e&tochange=84762dbeb5380461fe27f0afa0e27e8ba9dd3b01

Nothing jumps out at me from this regression range.

Comment 3

[Kohei Yoshino]

I guess this is due to the inline attachments being inserted while scrolling. Not super new but still a recent change on BMO. I thought there was a new CSS feature to avoid this kind of issues…

Comment 4

[Daniel Holbert [:dholbert]]

The CSS feature you're thinking of is "scroll anchoring", but that addresses a different use-case -- it tries to prevent the current "static" scroll position from changing (visually) when offscreen content is inserted/loaded.

The use-case here is different, though -- the user is initiating a scroll action, which is being interrupted by the page inserting content in response to that scroll action.

Comment 5

[Daniel Holbert [:dholbert]]

One possible mitigation: perhaps Bugzilla could proactively insert the inline attachments via window.requestIdleCallback(), just after pageload? Then there wouldn't be any need to interrupt scrolling most of the time.

(This would be for desktop... maybe not needed on mobile, if the goal is to reduce excess bandwidth consumption. Mobile doesn't have an "End" key anyway, typically.)

Comment 6

[Daniel Holbert [:dholbert]]

BTW, Scroll Anchoring actually makes this somewhat worse, probably because it sees the dynamic content insertion and intervenes to keep the scroll position static at that point (before the "end" operation has actually reached the end of the page). As a result, I only end up scrolled ~halfway through or less.

If I turn off scroll anchoring[1], my scroll operation gets further but not all the way to the end. In both Firefox-without-scroll-anchoring as well as in Chrome, the STR leave me scrolled ~150px-300px away from the end of the page.

So: given that multiple browsers are affected, I'm not sure it makes sense to track this under "Core" (except perhaps for the fact that it's worsened with this scrolling feature). This might want to be reclassified under the bugzilla.mozilla.org product.

[1] To disable scroll anchoring, set about:config pref layout.css.scroll-anchoring.enabled = false.

Comment 7

[Kohei Yoshino]

The current scrolling behaviour is not great anyway especially on a long page due to smooth scroll. I’ll add a workaround to Bugzilla to temporarily disable the smooth scrolling when the Home/End key is pressed, like this:

document.querySelector('#bugzilla-body').addEventListener('keydown', event => { 
  const { target, key, metaKey, ctrlKey } = event;
  const accel = metaKey || ctrlKey;
  const to_top = key === 'Home' || (key === 'ArrowUp' && accel);
  const to_bottom = key === 'End' || (key === 'ArrowDown' && accel);

  if (to_top || to_bottom) {
    event.preventDefault();
    target.style.setProperty('scroll-behavior', 'auto');
    target.scrollTop = to_top ? 0 : target.scrollHeight;
    target.style.setProperty('scroll-behavior', 'smooth');
  }
});

This skips the comments and jumps to the top/bottom of the page immediately.

Comment 8

[Kohei Yoshino]

Attachment: GitHub Pull Request

Comment 9

[Kohei Yoshino]

Instead of monitoring the Home and End keys, my PR will just remove smooth scroll from CSS and add a placeholder for an inline attachment before fetching and rendering it, so the scroll position will be kept in most cases.

Comment 10

[Kohei Yoshino]

Merged to master.