Regression: Parameter list jumps when being focused in chrome
Closed, ResolvedPublic5 Estimated Story PointsBUG REPORT
Actions

Description

Steps to replicate the issue (include links if applicable):

Open a template with a long parameter list in chrome.
Tab to the parameter list.

What happens?:
The paramter list jumps to an unclear position. Hiding the first few elements.

Peek 2022-07-11 14-55.gif (928×1 px, 805 KB)

What should have happened instead?:
The paramter list should not jump if no parameter is selected and jump to the selected parameter if one is selected.

Other information (browser name/version, screenshots, etc.):
This only happens in chrome. Firefox works fine.

Details

	Subject	Repo	Branch	Lines +/-
	Template dialog sidebar: Skip glitchy jQuery animation	mediawiki/extensions/VisualEditor	master	+1 -1
	Remove non-helpful 1px hack from template dialog sidebar	mediawiki/extensions/VisualEditor	master	+0 -3

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved	BUG REPORT	thiemowmde	T312768 Regression: Parameter list jumps when being focused in chrome
		Invalid		None	T313002 Browser's autoscroll doesn't work well with sticky outline header

Event Timeline

lilients_WMDE created this task.Jul 11 2022, 1:01 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 11 2022, 1:01 PM

P.S.: The situation is quite improved with https://gerrit.wikimedia.org/r/c/mediawiki/extensions/VisualEditor/+/812824/ - there's still some weird jump visible, but at least the grey highlighted parameter ( in this case the first in the list ) scrolls into view.

lilients_WMDE moved this task from Backlog to In sprint on the WMDE-Templates-FocusArea board.Jul 12 2022, 9:02 AM

thiemowmde added a project: WMDE-TechWish-Maintenance.Jul 12 2022, 9:15 AM

WMDE-Fisch claimed this task.Jul 12 2022, 12:04 PM

WMDE-Fisch moved this task from Sprint Backlog to Doing on the WMDE-TechWish-Sprint-2022-07-06 board.

thiemowmde moved this task from Incoming to Priority backlog on the WMDE-TechWish-Maintenance board.Jul 13 2022, 4:54 PM

WMDE-Fisch mentioned this in T313002: Browser's autoscroll doesn't work well with sticky outline header.Jul 14 2022, 1:13 AM

What happens here:

When the browser gets keyboard focus on the parameter list it highlights the first item to let the user move with the arrow keys.
Chrome has the habit of scrolling a select element to the top of the scrollable container it is in as soon is you tab into it and it gets focus.
The browser does not respect the offset implied by the sticky header part, so it scrolls the list "behind" the sticky.
Our scrollIntoView kicks in because of the focus event and fixes the scroll position.

So we get that "jump".

I tried to find a way to block that default scroll. But did not succeed. There seems to be none? o.O

For example by using preventDefault when scroll is triggered on the scroll-able.

element.focus({
  preventScroll: true
});

Unassigned from that task. Seems to only happen in Chrome. Checked FF and IE. Priority might be not to high.

Change 814123 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Remove non-helpful 1px hack from template dialog sidebar

https://gerrit.wikimedia.org/r/814123

gerritbot added a project: Patch-For-Review.Jul 15 2022, 11:05 AM

Change 814123 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Remove non-helpful 1px hack from template dialog sidebar

https://gerrit.wikimedia.org/r/814123

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.21; 2022-07-18).Jul 15 2022, 3:00 PM

Maintenance_bot removed a project: Patch-For-Review.Jul 15 2022, 3:30 PM

Change 814790 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Template dialog sidebar: Skip glitchy jQuery animation

https://gerrit.wikimedia.org/r/814790

gerritbot added a project: Patch-For-Review.Jul 18 2022, 12:06 PM

thiemowmde claimed this task.Jul 18 2022, 12:06 PM

thiemowmde moved this task from Sprint Backlog to Tech Review on the WMDE-TechWish-Sprint-2022-07-06 board.

thiemowmde set the point value for this task to 5.

thiemowmde closed subtask T313002: Browser's autoscroll doesn't work well with sticky outline header as Invalid.Jul 18 2022, 2:41 PM

Test wiki created on Patch demo by Svantje Lilienthal (WMDE) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/0ffb97b510/w

thiemowmde added a project: Regression.Jul 19 2022, 2:09 PM

thiemowmde added a project: WMDE-TechWish-Sprint-2022-07-20.Jul 20 2022, 8:08 AM

thiemowmde moved this task from Sprint Backlog to Tech Review on the WMDE-TechWish-Sprint-2022-07-20 board.

thiemowmde moved this task from Tech Review to UX/PM Review on the WMDE-TechWish-Sprint-2022-07-20 board.Jul 20 2022, 8:14 AM

Change 814790 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Template dialog sidebar: Skip glitchy jQuery animation

https://gerrit.wikimedia.org/r/814790

lilients_WMDE moved this task from UX/PM Review to Demo on the WMDE-TechWish-Sprint-2022-07-20 board.Jul 22 2022, 12:52 PM

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.22; 2022-07-25); removed MW-1.39-notes (1.39.0-wmf.21; 2022-07-18).Jul 22 2022, 1:00 PM

Maintenance_bot removed a project: Patch-For-Review.Jul 22 2022, 1:30 PM

lilients_WMDE moved this task from Priority backlog to In progress on the WMDE-TechWish-Maintenance board.Aug 2 2022, 12:30 PM

thiemowmde closed this task as Resolved.Aug 16 2022, 9:55 AM