Page MenuHomePhabricator

2px page jump when hovering elements in .vector-menu-content-list when no element is .selected
Closed, ResolvedPublic0 Estimated Story PointsBUG REPORT

Description

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

What happens?:

  • Because no menu item is "selected", the rest of the page jumps down when the border-bottom for a:hover is applied

What should have happened instead?:

  • There should be no visible jump.

Proposed solution:

  • Add a rule to the non-hover versions of this element with border-bottom: 2px solid transparent;.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

  • Does not occur in Chrome
  • Occurs in Firefox

QA Results - Beta

ACStatusDetails
1T361841#9730937

QA Results - Prod

ACStatusDetails
1T361841#9730942

Event Timeline

Change #1017065 had a related patch set uploaded (by Jon Harald Søby; author: Jon Harald Søby):

[mediawiki/skins/Vector@master] Add transparent bottom border to .mw-list-item.vector-tab-noicon

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

Jdlrobson set the point value for this task to 0.

Change #1017065 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add transparent bottom border to .mw-list-item.vector-tab-noicon

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

Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

Test Steps

Visit https://no.wikipedia.org/wiki/Spesial:Misbruksfilter/1?uselang=en&useskin=vector-2022 in Firefox browser
Hover the menu items at the top (Home, Recent filter changes, Examine past edits, etc.)
✅ AC1: There should be no visible jump.

screenshot 40.mov.gif (684×1 px, 364 KB)

Test Result - Prod

Status: ✅ PASS
Environment: nowiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

Test Steps

Visit https://no.wikipedia.org/wiki/Spesial:Misbruksfilter/1?uselang=en&useskin=vector-2022 in Firefox browser
Hover the menu items at the top (Home, Recent filter changes, Examine past edits, etc.)
✅ AC1: There should be no visible jump.

screenshot 39.mov.gif (684×1 px, 279 KB)