Open Bug 852146 Opened 11 years ago Updated 6 days ago

Google Mail has horizontal scrollbars in 3-panel mode

Categories

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

x86_64
Windows 7

Tracking

(platform-rel -, firefox19 unaffected, firefox21 wontfix, firefox22 wontfix, firefox-esr102 wontfix, firefox100 wontfix, firefox101 wontfix, firefox109 wontfix, firefox110 wontfix, firefox111 wontfix)

Tracking Status
platform-rel --- -
firefox19 --- unaffected
firefox21 --- wontfix
firefox22 --- wontfix
firefox-esr102 --- wontfix
firefox100 --- wontfix
firefox101 --- wontfix
firefox109 --- wontfix
firefox110 --- wontfix
firefox111 --- wontfix

People

(Reporter: cwiiis, Assigned: twisniewski)

References

(Depends on 1 open bug, )

Details

(Keywords: webcompat:site-wait, Whiteboard: [testday-20130719][country-all][sitewait] [webkit-scrollbar][platform-rel-Gmail][platform-rel-Google])

User Story

platform:windows
impact:minor-visual
configuration:general
affects:all

Attachments

(6 files)

If you change your GMail settings to view mail in 3-panel mode, the messages list and message view both have horizontal scrollbars at all times. It seems this is because they use -webkit-box-sizing, and don't provide any other declaration, unprefixed or otherwise.

We should ask them to either specify -moz-box-sizing, specify box-sizing and fix bug 243412, or find some other way to do what they're doing.
Blocks: google.com
Actually, while the box-sizing is still an issue, that doesn't seem to be what causes this to get the horizontal scrollbars. This displays correctly in Firefox 19, so I guess is a layout regression.
Assignee: english-us → nobody
Component: English US → Layout
Product: Tech Evangelism → Core
Version: unspecified → Trunk
I'm not sure if this affects beta (I think it does, but I haven't confirmed), but it definitely affects Aurora and Nightly.
Windows 7 64 bit and Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20130719 Firefox/25.0

I cannot reproduce this bug.
Whiteboard: [testday-20130719]
Attached image gmail-scrollbars.png
This is still an issue, here's a screenshot - notice the unnecessary horizontal scrollbar in the messages panel.
This still reproduces on current trunk. I was able to reproduce as far back as ESR10 before stopping. I'm removing the regressionwindow-wanted keyword since it seems unlikely to be of much help at this point.
I tried to activate the Preview Pane in Labs settings but without success.
Is this option still exists. If yes how do I activate it.
Ah found. 
To reproduce this.

1. Go to https://gmail.com/
2. In the right gear, select settings
3. Click on the labs Tab.
4. Select Enable Preview Pane.
5. Save Changes
6. On the icon in between the keyboard and the arrows for navigation, click to activate the Toogle Split pane mode.
7. Select a message in the left column

Enjoy.

So for me on Firefox Nightly this seems to be fixed.
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
Presumably whether it's fixed depends on the layout.css.prefixes.webkit preference (which we're still not quite shipping to beta/release)?
I tested in Firefox Nightly 49.0a1 (2016-04-26)
with `layout.css.prefixes.webkit; false`
and it's working.
Also using Nightly 2016-04-26 on Windows 10, this doesn't appear to be fixed for me.
This is what it shows on my mac. 
It would be interesting to know if there is a difference in between Windows and MacOSX
The markup for the left column with mailbox list starts at `.apP`

  <div style="width: 346px; height: 492px;" class="nH age apP aZ6 apk nn">

  </div>

there is an overflow 

.age {
	background: none;
	overflow-y: scroll;
}

but only vertical.

I can see a scroll event listener on this div. 

I remember a similar issue in the past which was related to the interactions of system preference on macosx and the scrollbar settings in CSS. On MacOSX there is a choice of showing bar all the time or only when scrolling, and it was creating an issue on one site. I can't remember which one. 
In this case modifying these preferences on my mac doesn't change anything to the behavior on Firefox Nightly 49.0a1 (2016-04-27). Even trying to resize the columns, etc and asking for displaying always.

No horizontal bars with and without webkit pref true.
I'm reopening and maybe mike or hallvord will have a better idea on the differences.
Status: RESOLVED → REOPENED
Flags: needinfo?(miket)
Flags: needinfo?(hsteen)
Resolution: FIXED → ---
Attached image gmail.gif
Yep, I can reproduce on Windows 10. OSX is fine.

In this gif, you can see that removing overflow-y: scroll on the .age container also kills the horizontal scrollbar. And if you resize its immediate child by -2px, the horizontal scrollbar disappears.

Crazy theory: Gmail is assuming a scrollbar with be a certain width, and our vertical scrollbar width causes horizontal overflow?
Flags: needinfo?(miket)
Hard to arrange this nicely, but here's a screenshot of Nightly, Edge, and Chrome. You can see we have the widest scrollbars.

In both Edge and Chrome if you bump up .age's child width by a few pixels you get the same horizontal scrollbar.
In the following file:

/_/scs/mail-static/_/js/k=gmail.main.en.cyIFDuqk_Yo.O/m=sy69,sy486,sy63,sy478,sy495,sy481,sy487,sy490,sy498,sy513,sy514,sy507,sy505,sy480,sy493,sy488,sy497,sy517,sy518,sy511,sy509,sy506,sy479,sy232,sy494,sy496,sy499,sy502,sy501,sy503,sy516,sy508,sy519,sy522,sy482,sy489,sy521,sy500,cm,mo,sy523,sy527,cmb/am=PiNeC5j_e38wrjMAaKUPVJj3_vPdkrazyz3-f28CROpVwP_N_h_E_8HevIUC/rt=j/rs=AHGWq9BiQli3IG1j-tBowdcYeNe6Y41Q4g

f.wkc = function(a) {
  if (this.Lo()) {
      [snip]
      Mc && (b.cssStyles = Va(b.cssStyles, " body::-webkit-scrollbar { width: 15px; } body::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 99px rgba(0,0,0,.2); border: solid transparent; border-width: 6px 4px; } body::-webkit-scrollbar-thumb:vertical { min-height: 40px; } body::-webkit-scrollbar-thumb:horizontal { min-width: 40px; } body::-webkit-scrollbar-thumb:hover { -webkit-box-shadow: inset 0 0 99px rgba(0,0,0,.4); }"));
      [snip]
  }
}

So they're setting the scrollbar to be 2px smaller than its default size (which is 17px in Chrome and Firefox, according to http://www.textfixer.com/tutorials/scrollbar-pixel-width-test.php). I guess that explains the 2px bump to remove the horizontal scrollbar.

Edge reports a default scrollbar width of 12px. They seem to not support ::-webkit-scrollbar in my testing.

Karl, enough info to ask Google for a fix?
Flags: needinfo?(hsteen) → needinfo?(kdubost)
Component: Layout → Desktop
Flags: needinfo?(kdubost)
Product: Core → Tech Evangelism
Switched to Web Compatibility.
Contacted Google about it.
Assignee: nobody → kdubost
Status: REOPENED → ASSIGNED
Whiteboard: [testday-20130719] → [testday-20130719][country-all][sitewait]
Whiteboard: [testday-20130719][country-all][sitewait] → [testday-20130719][country-all][sitewait] [webkit-scrollbar]
platform-rel: --- → ?
Whiteboard: [testday-20130719][country-all][sitewait] [webkit-scrollbar] → [testday-20130719][country-all][sitewait] [webkit-scrollbar][platform-rel-Gmail][platform-rel-Google]
platform-rel: ? → -
Priority: -- → P3
Edge also has this issue, I'm using Windows 10 v1709. Does that mean that maybe this is a bug with the Gmail website and not Firefox and Edge? I wasn't seeing this issue in the previous version of Edge (or the version before that one, I'm not exactly sure)
(In reply to Will from comment #19)
> Edge also has this issue, I'm using Windows 10 v1709. Does that mean that
> maybe this is a bug with the Gmail website and not Firefox and Edge? I
> wasn't seeing this issue in the previous version of Edge (or the version
> before that one, I'm not exactly sure)

Yes, Will. This is a bug in Gmail because it makes assumptions about the width of a scrollbar and browsers may have different widths.
just thought it's worth noting that Gmail released an updated design today and amazingly, this issue is still present! I see it in Firefox and also Edge
Thanks for the update!
Depends on: 1432935
Attached image Screenshot_2.png
Attaching a new screenshot, for the new GMail design.
Product: Tech Evangelism → Web Compatibility

See bug 1547409. Moving webcompat whiteboard tags to keywords.

The issue is still reproducible.
https://prnt.sc/oJsNa0Dgs_fO

Tested with:
Browser / Version: Firefox Nightly 100.0a1 (2022-03-31)
Operating System: Windows 10 Pro

Severity: normal → S3
Assignee: karl+moz → nobody
Status: ASSIGNED → NEW

The issue is still reproducible. The unnecessary scrollbar is still present in an email that has no content to be scrolled: https://prnt.sc/7jUrtrXSOVTc

Tested with:

Browser / Version: Firefox Nightly 111.0a1 (2023-01-18) (64-bit)
Operating System: Windows 10 PRO x64

Assignee: nobody → twisniewski
Status: NEW → ASSIGNED
Whiteboard: [testday-20130719][country-all][sitewait] [webkit-scrollbar][platform-rel-Gmail][platform-rel-Google] → [testday-20130719][country-all][sitewait] [webkit-scrollbar][platform-rel-Gmail][platform-rel-Google][webcompat:needs-knowledgebase]
Status: ASSIGNED → NEW
Depends on: 1886138
Whiteboard: [testday-20130719][country-all][sitewait] [webkit-scrollbar][platform-rel-Gmail][platform-rel-Google][webcompat:needs-knowledgebase] → [testday-20130719][country-all][sitewait] [webkit-scrollbar][platform-rel-Gmail][platform-rel-Google]
Severity: S3 → S4
User Story: (updated)
Keywords: regression
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: