1657549 - G-drive [Sign In] button for documents overlaps scrollbar on zoom-out

Status: ASSIGNED

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

Description

[Cristian Fogel [:cfogel]]

Attachment: zoomOnMyBar.gif

Affected versions

• 79.0, 80.0b4, 81.0a1(2020-08-04)

Affected platforms

• Windows 10; macOS 10.15, Ubuntu 16;

Steps to reproduce

1. Launch Firefox;
2. Access any document on Google Drive (not being connected) ex: link;
3. Zoom out to the max value;
4. Drag the link to open in a second tab;
5. Reset zoom;

Expected result

• the [Sign In] button never overlaps the scrollbar;

Actual result

• at step 3 & 5 the [Sign In] button is over the scrollbar;

Regression range

• not a regression;

Additional notes

• attached recording with the issue;
• looks like the fixed position of the button is not honoring the zoom levels;
• suggested severity is S4.

Comment 1

[Daniel Holbert [:dholbert]]

This isn't a Firefox bug; we're faithfully honoring the styles that Google is providing to us (aside from some non-standard webkit-prefixed scrollbar styling)

Hence, reclassifying as Webcompat

Details:
While it looks like the button is inside the scrollable area (which makes the overlap seem broken), in fact the button is in a separate element outside of the scrollable area, and that element stretches across the whole screen (over the top of the scrollbar).

The only thing keeping it from overlapping the scrollbar is this that its container has margin-right: 12px, and the button itself also has a padding-right of 8px (which in this case renders as transparent area, looking like additional spacing). So, combined, that gives the button 20 CSS Pixels of space to the right of the button.

When you zoom out, the size of a CSS pixel shrinks, but our scrollbar remains the same size, so that 20 CSS pixels is suddenly not large enough to offset the button from the scrollbar.

Chrome normally agrees with us on this behavior (i.e. their scrollbars don't normally change thickness on zoom-out), though in this particular case they're using CSS to customize the size of their scrollbars. Unfortunately, the CSS that they're using to do this is nonstandard -webkit prefixed stuff. If I disable all of that to make them use the default scrollbar, then they end up with overlap just like we do.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of Chrome displaying the same issue, if I uncheck their webkit-prefixed scrollbar styles (shown in devtools at bottom)

Comment 3

[Oana Arbuzov [:oanaarbuzov]]

I was able to reproduce the issue.
https://prnt.sc/w8hvjb

Tested with:
Browser / Version: Firefox Nightly 86.0a1 (2020-12-22)
Operating System: Windows 10 Pro

Comment 4

[Raul Bucata]

I was able to reproduce the issue following the steps to reproduce:

https://prnt.sc/gv7-UwTWLdZH
https://prnt.sc/z-HKQGYInSGK

Tested with:

Browser / Version: Firefox Release 100.0.2 (64-bit)/ Firefox Nightly 103.0a1 (2022-05-30) (64-bit) Chrome Version Version 102.0.4004.63 (Official Build) (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 and Release.
3. Works as expected using Chrome.

Comment 5

[Ksenia Berezina [:ksenia]]

As Daniel mentioned in comment 1 Google uses nonstandard -webkit-scrollbar styling to make the scrollbar thinner in Chrome.
We could try to reach out to them to see if they could use scrollbar-width: thin; instead.