Open Bug 1657549 Opened 2 years ago Updated 2 months ago

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

Categories

(Web Compatibility :: Desktop, defect, P3)

Desktop
All

Tracking

(firefox79 affected, firefox80 affected, firefox81 affected, firefox86 affected, firefox102 affected, firefox103 affected)

ASSIGNED
Tracking Status
firefox79 --- affected
firefox80 --- affected
firefox81 --- affected
firefox86 --- affected
firefox102 --- affected
firefox103 --- affected

People

(Reporter: cfogel, Assigned: ksenia)

Details

(Keywords: webcompat:contact-ready)

Attachments

(2 files)

Attached image 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.
Has STR: --- → yes
Summary: G-drive Connect button for documents overlaps scrollbar on zoom-out → G-drive [Sign In] button for documents overlaps scrollbar on zoom-out
Severity: normal → --

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.

Component: CSS Parsing and Computation → Desktop
Product: Core → Web Compatibility

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

Priority: -- → P3
Assignee: nobody → kberezina

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.
Status: NEW → ASSIGNED
OS: Unspecified → All
Hardware: Unspecified → Desktop

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.

You need to log in before you can comment on or make changes to this bug.