1753599 - [Ubuntu] The layout of the settings page is displayed incorrectly on gmail manage labels page

Status: RESOLVED WONTFIX

(Web Compatibility :: Site Reports, defect)

Description

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

Attachment: layout issue.png

Note

• Not reproducible on Chrome browser.
• Only an Ubuntu issue.

Affected versions

• Firefox 96.0
• Firefox 97.0
• Firefox 91.5.0esr
• Firefox 98.0a1

Affected platforms

• Ubuntu 20.04 x64, Ubuntu 18.04 x64

Steps to reproduce

1. Launch Firefox.
2. Access https://mail.google.com/ and login with a valid account.
3. Access Quick settings from upper right corner (icon between "Support" and "Google apps" icons, click on settings gear) and select a theme.
4. Go to inbox and right click on a mail from list, select from this context menu the "Move to" item and after that "Manage label".

Expected result

• The layout of settings page is correctly displayed.

Actual result

• Shows up a settings page, observe the upper right corner of this page near the scrollbar (see the attachment), the layout of settings page is incorrectly displayed.

Regression range

• I am not sure if this is a regression, I will investigate ASAP.

Additional notes

• This layout issue appears only if in gmail (step 3) a theme was selected before.

Comment 1

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

This issue is not a regression as it is reproducible on very old builds Fx 54.0a1, Fx 66.0a1, Fx 69.0a1.

Comment 2

[Oana Arbuzov [:oanaarbuzov]]

This is still an issue.
https://i.imgur.com/YwUlhM8.png

Note: The issue is not reproducible on Chrome.

Tested with:
Browser / Version: Firefox Nightly 104.0a1 (2022-06-29)
Operating System: Ubuntu 20.04.2

Comment 3

[Calin Tanase]

Attachment: gmail Chrome vs Firefox.png

There seems to be an issue with the scroll bar. Firefox uses a different style compared to Chrome.

Tested on:
Operating system: Ubuntu 22.04 LTS
Browser/version: Nightly 111.0a1 (2023-02-02) / Chrome 109.0.5414.119

Comment 4

[Ksenia Berezina [:ksenia]]

Gmail uses .webkit-scrollbar to style the scrollbars, which is webkit specific and not supported by Firefox, so this is expected.

.Tm::-webkit-scrollbar, .Nr>.aZ6::-webkit-scrollbar, .S4>.aZ6::-webkit-scrollbar {
    background-color: none;
}
.Tm::-webkit-scrollbar, .aZ6::-webkit-scrollbar, .aiL::-webkit-scrollbar, .dOsDob::-webkit-scrollbar, .J-M::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}
.Tm::-webkit-scrollbar-button, .aZ6::-webkit-scrollbar-button, .aiL::-webkit-scrollbar-button, .dOsDob::-webkit-scrollbar-button, .J-M::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

.Tm::-webkit-scrollbar-corner, .aZ6::-webkit-scrollbar-corner, .aiL::-webkit-scrollbar-corner, .dOsDob::-webkit-scrollbar-corner, .J-M::-webkit-scrollbar-corner {
    background-color: transparent;
}
.Tm::-webkit-scrollbar-thumb, .Nr>.aZ6::-webkit-scrollbar-thumb, .S4>.aZ6::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2);
    -webkit-box-shadow: inset 1px 1px 0px rgb(0 0 0 / 10%), inset 0px -1px 0px rgb(0 0 0 / 7%);
}
.Tm::-webkit-scrollbar-thumb, .aZ6::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2);
    -webkit-box-shadow: inset 1px 1px 0px rgb(0 0 0 / 10%), inset 0px -1px 0px rgb(0 0 0 / 7%);
}