Google Mail has horizontal scrollbars in 3-panel mode

ASSIGNED
Assigned to

Status

Tech Evangelism
Desktop
ASSIGNED
4 years ago
6 days ago

People

(Reporter: cwiiis, Assigned: karlcow)

Tracking

(Blocks: 1 bug, {regression})

Trunk
x86_64
Windows 7
regression

Firefox Tracking Flags

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

Details

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

Attachments

(5 attachments)

(Reporter)

Description

4 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.
(Reporter)

Updated

4 years ago
Blocks: 759981
(Reporter)

Comment 1

4 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
(Reporter)

Comment 2

4 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

4 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]
(Reporter)

Comment 4

4 years ago
Created attachment 779095 [details]
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.
Keywords: regressionwindow-wanted
(Assignee)

Comment 6

a year 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.
(Assignee)

Comment 7

a year ago
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
Last Resolved: a year 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)?
(Assignee)

Comment 9

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

Comment 10

a year 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.
(Assignee)

Comment 11

a year ago
Created attachment 8746339 [details]
gmail-macosx-no-scrollbar.png

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

Comment 12

a year 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">

  </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.
(Assignee)

Comment 13

a year ago
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 → ---
Created attachment 8746707 [details]
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)
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:

/_/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)
(Assignee)

Updated

a year ago
Component: Layout → Desktop
Flags: needinfo?(kdubost)
Product: Core → Tech Evangelism
(Assignee)

Comment 17

a year ago
Switched to Web Compatibility.
Contacted Google about it.
Assignee: nobody → kdubost
Status: REOPENED → ASSIGNED
Whiteboard: [testday-20130719] → [testday-20130719][country-all][sitewait]
(Assignee)

Updated

7 months 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]

Updated

6 days ago
platform-rel: ? → -
You need to log in before you can comment on or make changes to this bug.