Google Mail has horizontal scrollbars in 3-panel mode

Assigned to


6 years ago
6 months ago


(Reporter: cwiiis, Assigned: karlcow)


(Depends on: 1 bug, Blocks: 1 bug, {regression})

Firefox Tracking Flags

(platform-rel -, firefox19 unaffected, firefox21 affected, firefox22 affected)


(Whiteboard: [testday-20130719][country-all][sitewait] [webkit-scrollbar][platform-rel-Gmail][platform-rel-Google], URL)


(6 attachments)



6 years ago
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.


6 years ago
Blocks: 759981

Comment 1

6 years ago
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
Keywords: regression, regressionwindow-wanted
Product: Tech Evangelism → Core
Version: unspecified → Trunk

Comment 2

6 years ago
I'm not sure if this affects beta (I think it does, but I haven't confirmed), but it definitely affects Aurora and Nightly.
status-firefox19: --- → unaffected
status-firefox21: --- → affected
status-firefox22: --- → affected

Comment 3

5 years ago
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]

Comment 4

5 years ago
Created attachment 779095 [details]

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.
Keywords: regressionwindow-wanted

Comment 6

3 years ago
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.

Comment 7

3 years ago
Ah found. 
To reproduce this.

1. Go to
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


So for me on Firefox Nightly this seems to be fixed.
Last Resolved: 3 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)?

Comment 9

3 years ago
I tested in Firefox Nightly 49.0a1 (2016-04-26)
with `layout.css.prefixes.webkit; false`
and it's working.

Comment 10

3 years ago
Created attachment 8745962 [details]
Screenshot 2016-04-27 12.12.56.png

Also using Nightly 2016-04-26 on Windows 10, this doesn't appear to be fixed for me.

Comment 11

3 years ago
Created attachment 8746339 [details]

This is what it shows on my mac. 
It would be interesting to know if there is a difference in between Windows and MacOSX

Comment 12

3 years ago
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">


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.

Comment 13

3 years ago
I'm reopening and maybe mike or hallvord will have a better idea on the differences.
Flags: needinfo?(miket)
Flags: needinfo?(hsteen)
Resolution: FIXED → ---
Created attachment 8746707 [details]

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)
Created attachment 8746708 [details]
Nightly | Edge | Chrome scrollbar widths

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:


f.wkc = function(a) {
  if (this.Lo()) {
      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); }"));

So they're setting the scrollbar to be 2px smaller than its default size (which is 17px in Chrome and Firefox, according to 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)


3 years ago
Component: Layout → Desktop
Flags: needinfo?(kdubost)
Product: Core → Tech Evangelism

Comment 17

3 years ago
Switched to Web Compatibility.
Contacted Google about it.
Assignee: nobody → kdubost
Whiteboard: [testday-20130719] → [testday-20130719][country-all][sitewait]


2 years ago
Whiteboard: [testday-20130719][country-all][sitewait] → [testday-20130719][country-all][sitewait] [webkit-scrollbar]
Duplicate of this bug: 1344972
platform-rel: --- → ?
Whiteboard: [testday-20130719][country-all][sitewait] [webkit-scrollbar] → [testday-20130719][country-all][sitewait] [webkit-scrollbar][platform-rel-Gmail][platform-rel-Google]


2 years ago
platform-rel: ? → -
Priority: -- → P3

Comment 19

8 months ago
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.

Comment 21

7 months ago
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
Created attachment 8984162 [details]

Attaching a new screenshot, for the new GMail design.
You need to log in before you can comment on or make changes to this bug.