1707915 - The "All folders" dropdown scrollbar background is transparent in Outlook

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect, P3)

Description

[Timea Zsoldos [:zstimi/tzsoldos], Desktop QA]

Attachment: Image 2.png

Note

• This issue not reproducible on Chrome.

Affected versions

• Fx 89.0b4
• Fx 89.0b4 DevEd
• Fx 90.0a1

Affected platforms

• macOS 10.15
• Windows 8.1 x64
• Ubuntu 20.04 x64

Preconditions
*Have a lots of folders created in Outlook, in order to expand the "All folders" dropdown and to have there a scroll bar.

Steps to reproduce

1. Launch Firefox.
2. Access the following website: https://outlook.live.com/ and login.
3. Click on search bar from outlook page in order to extend the left part of this bar, then click on a down arrow to expand the "All folders" list.
4. Observe the scroll bar on this dropdown list.

Expected result

• The background of this scroll bar is not transparent.

Actual result

• The background of this scroll bar is transparent.

Regression range

• I will come back with regression range ASAP.

Additional notes

• See the attached screenshot.
• Reproducible with pref widget.non-native-theme.enabled = true and false and pref browser.proton.enabled =true and false.

Comment 1

[Alice0775 White]

I think this is the site problem.
Because, the page specifies the following css.
And disabling the css property in inspector style rule view, then the problem is gone.

.customScrollBar, body {
    scrollbar-color: var(--neutralTertiaryAlt) transparent;
}

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Yeah, the site is styling it like that... Maybe we can contact them?

Comment 3

[Timea Zsoldos [:zstimi/tzsoldos], Desktop QA]

I think there's something else here, because I investigated to find a regression range and I experienced the following:

Last good build: 2018-10-09
First bad build: 2018-10-10
Pushlog-url: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=6f8701d1be0ccf42a8e22bfce6f40056a4f58a1b&tochange=2f85c2b55cd2f1b241f27b7ad8b9dfe42dfc139c

Inspected the scrollbar on bad and good build found the same css:
.customScrollBar, body {
scrollbar-color: var(--neutralTertiaryAlt) transparent;
}

Comment 4

[Emilio Cobos Álvarez (:emilio)]

That's bug 1494607, which actually honored the transparent keyword.

Comment 5

[Karl Dubost💡 :karlcow]

Needs Triage.

Comment 6

[Raul Bucata]

We appreciate your report. I was able to reproduce the issue. The drop-down scrollbar from the "Search" field is transparent, and text/items can be seen through it

Tested with:

Browser / Version: Firefox Nightly 92.0a1 (2021-07-20) (64-bit)
Operating System: Windows 10 PRO x64

Notes:

1. Reproducible regardless of the status of ETP
2. Reproducible on the latest build of Firefox Nightly
3. Works as expected using Chrome

Comment 7

[Raul Bucata]

It seems that the UI of the page has been updated, as clicking on the dropdown arrow next to the "Search field" does not present a scroll bar, and scrolling the list is very difficult (regardless of the number of folders created). This has been observed using Chrome and Edge as well.

Tested with:

Browser / Version: Firefox Nightly 99.0a1 (2022-02-08) (64-bit)/ Chrome Version 98.0.4758.82 (Official Build) (64-bit)/Microsoft Edge Version 98.0.1108.43 (Official build) (64-bit)
Operating System: Windows 10 PRO x64

Timea, could you please confirm this?

Comment 8

[Timea Zsoldos [:zstimi/tzsoldos], Desktop QA]

I can confirm that the UI of the page has been updated, tested on Windows 10 x64, Ubuntu 20.04 x64 and on macOS 10.15 using Firefox 98.0b2.

Comment 9

[Raul Bucata]

Since the UI of the page has been updated and the scroll bar is no longer present on other browsers as well, we will be closing this. Thank you Timea for the update and for confirming.