Page MenuHomePhabricator

[BUG] Double vertical scrollbar appearing on every guidance panel screen in certain browsers
Open, Needs TriagePublicBUG REPORT

Description

This issue was noticed on viwiki by our @PPham.

Occurring on:
  • Viwiki (production)
  • Browser: Chrome (version TBC)
Steps to Reproduce:

Open the guidance panel for any task type.

Actual Results:

Double vertically scrollbars are shown, even in cases were no scroll should be needed at all.


See video of the bug here:
https://youtu.be/NKYgmApE0VU

Expected Results:

There should only be max 1 scrollbar shown, and only when the content overflows the height of the panel

Event Timeline

RHo created this task.Jun 19 2020, 8:36 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 19 2020, 8:36 AM
Tgr added a subscriber: Tgr.Jun 20 2020, 9:36 PM

Hm, this works fine for me even in a very narrow window:

(Not the same tip open in that screenshot but it doesn't make any difference.)

I can reproduce it pretty easily when I open DevTools but I have not yet seen it with DevTools closed.

Tgr added a comment.Jun 22 2020, 12:26 PM

I now realize this is a bug I have seen locally (and wanted to file but haven't gotten around yet), where the absolute positioning of .oo-ui-window-head messes up some height calculation and the help panel ends up with extra space below the visible area:

The size of the browser window doesn't matter.

I imagine the viwiki screenshot was made with a short browser window so the content needed to scroll, and that caused the inner scrollbar. That, in itself, is normal.

Tgr added a comment.Jun 22 2020, 2:10 PM

absolute positioning of .oo-ui-window-head messes up some height calculation

That's not the main reason, actually. The relocation of the cog/ellipsis menu made the home panel scroll, and panel sizes are synchronized for the switching animation. So the help panel will always show a scroll bar because the home panel needs it, even when the home panel is not visible.

Some possible workarounds:

  • Put the scroll bar inside the home panel (ie. during the transition animation the scroll bar will animate too)
  • Put the footer outside the panels (so it won't animate during panel switching). Probably ugly because the panel does appear/disappear during panel switching.
  • Accept that the guidance panel will have a scroll bar for no obvious reason, and make sure the footer does not have empty space below it at least. Ugly + the footer will be invisible without scrolling.
  • Just make the panel taller so the home panel does not need to scroll. Kind of a hack (reverts if one of the menu options is long enough to take multiple lines, for example).
  • Hide the home panel after the animation has finished.

The last one seems like the sanest option to me. It does add complexity though.

RHo added a comment.Jun 22 2020, 3:54 PM

absolute positioning of .oo-ui-window-head messes up some height calculation

That's not the main reason, actually. The relocation of the cog/ellipsis menu made the home panel scroll, and panel sizes are synchronized for the switching animation. So the help panel will always show a scroll bar because the home panel needs it, even when the home panel is not visible.

Some possible workarounds:

  • Put the scroll bar inside the home panel (ie. during the transition animation the scroll bar will animate too)
  • Put the footer outside the panels (so it won't animate during panel switching). Probably ugly because the panel does appear/disappear during panel switching.
  • Accept that the guidance panel will have a scroll bar for no obvious reason, and make sure the footer does not have empty space below it at least. Ugly + the footer will be invisible without scrolling.
  • Just make the panel taller so the home panel does not need to scroll. Kind of a hack (reverts if one of the menu options is long enough to take multiple lines, for example).
  • Hide the home panel after the animation has finished.

The last one seems like the sanest option to me. It does add complexity though.

Hi @Tgr - I was tinkering in inspector and wondering if another option could be to set overflow-y:hidden on .mw-ge-help-panel-processdialog .oo-ui-window-body on the panel when it is on the Guidance screen? That is, toggle to remove this overflow property whenever the user is on Guidance?
Here's a vid of what I mean: https://www.youtube.com/watch?v=-Cwy1lpYax4&feature=youtu.be

Tgr added a comment.Jun 22 2020, 4:59 PM

That might work too. The nontrivial part, whether it is overflow-y: hidden or display: none, is that there seems to be some JS height calculation involved so that might need to be re-triggered.

RHo added a comment.Jun 23 2020, 2:17 PM

hi @PPham - would you mind confirming that you are still experiencing this bug, and providing the browser version where it is occurring? Also, to confirm: are you experiencing this in production version of Viwiki?

PPham added a comment.Jun 23 2020, 2:27 PM

@RHo hi, as I just checked the bug is still here. I try it in 2 browsers:

  • Google Chrome: latest, Version 83.0.4103.116 (Official Build) (64-bit)
  • Cốc cốc - it's a local browser in Vietnam: lastest, Version 86.0.172 (Official Build) (32 bit)

Ah yes, of course it's in viwiki. But oops, I just try the suggested edits in kowiki and I experience this same bug. Maybe it's me?

Change 607627 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Help panel: Make the home panel scrollable

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

Change 607627 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Help panel: Make the home panel scrollable

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

Etonkovidova added a subscriber: Etonkovidova.

For Design Review.

  • the double vertical scroll is not present anymore
  • I checked in the following browsers - Chrome 83, FF 76, Safari 10, and Edge 83, IE11 (Windows 10) - looks as expected, please review the animated gif below.


And the gif for the narrow case (Note: it looks more visually balanced, in my opinion).

Thanks @Etonkovidova, moving to PM. Note for @MMiller_WMF the narrow case looks better since this was tested because the 360px width (T255719) will resolve the overflowing tabs, and the breaking difficulty label ribbon bug has also been fixed on T254524: