1873826 - Scrollbar gets hidden when opening dropdown menu

Status: RESOLVED WORKSFORME

(bugzilla.mozilla.org :: Bug Creation/Editing, defect)

Description

[Tooru Fujisawa [:arai]]

Attachment: Popup hides scrollbar

Steps to reproduce:

1. on macOS's preference, configure the scrollbar to be always shown
2. click Status drop down menu on bugzilla

Actual result:
scrollbar gets hidden, and the entire content gets shifted.

Expected result:
the drop down menu doesn't hide scrollbar.

Comment 1

[Tooru Fujisawa [:arai]]

This comes from the following code:

https://github.com/mozilla-bteam/bmo/blob/f52985e0aceb22147a9aea4d366b8814de198dd2/js/components/select.js#L794

class BzSelectElement extends HTMLElement {
...
  #showDropdown() {
...
    document.body.style.setProperty('overflow', 'hidden');

I suppose it's to suppress scroll which makes the drop down menu off from the anchor, but the scrollbar getting hidden/shown for each click is more problematic, given that happens while regular operation, and it's hard to operate on each menu if the entire page content shifts every time.

possible solutions:

• (a) apply overflow-y: scroll + position: fixed instead (this resets the scroll position, and doesn't work well if the menu is opened with scrollTop != 0)
• (b) just allow scrolling
• (c) allow scrolling, and periodically update the menu position

Comment 2

[BMO Github Automation]

Attachment: [mozilla-bteam/bmo] Bug 1873826 - Avoid hiding scrollbar when opening drop down menu. (#2165)

Comment 3

[Tooru Fujisawa [:arai]]

Attachment: GitHub Pull Request

Comment 4

[Tooru Fujisawa [:arai]]

I took (c), with updating the position on scroll event

Comment 5

[BMO Github Automation]

Attachment: [mozilla-bteam/bmo] Bug 1873826 - Scrollbar gets hidden when opening dropdown menu (#2167)

Comment 6

[Kohei Yoshino [:kohei]]

My PR merged. https://github.com/mozilla-bteam/bmo/commit/de24d32a6dac3aa7124658b7b000de69c31c2412

Comment 7

[David Lawrence [:dkl]]

This change has caused a visual issue with Firefox on Windows that I have verified on my end. It causes a white bar on the right and/or left sides of the viewport where a scroll bar would normally be even if the scroll bar is not visible. If I disable to the CSS change using devtools, the bar disappears. Attaching screenshot.

Comment 8

[David Lawrence [:dkl]]

Attachment: Screenshot 2024-01-11 at 09-53-06 Browse.png

Comment 9

[Tooru Fujisawa [:arai]]

my PR won't cause the issue.
can we use it instead?

Comment 10

[David Lawrence [:dkl]]

(In reply to Tooru Fujisawa [:arai] from comment #9)

my PR won't cause the issue.
can we use it instead?

Comment 11

[BMO Github Automation]

Attachment: [mozilla-bteam/bmo] Revert "Bug 1873826 - Scrollbar gets hidden when opening dropdown menu" (#2181)

Comment 12

[Tooru Fujisawa [:arai]]

bug 1870891 patch is reverted and the problem no longer reproduces.