852146 - Google Mail has horizontal scrollbars in 3-panel mode

Status: NEW

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

Description

[Chris Lord [:cwiiis]]

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.

Comment 1

[Chris Lord [:cwiiis]]

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.

Comment 2

[Chris Lord [:cwiiis]]

I'm not sure if this affects beta (I think it does, but I haven't confirmed), but it definitely affects Aurora and Nightly.

Comment 3

[Gabriela [:gaby2300]]

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.

Comment 4

[Chris Lord [:cwiiis]]

Attachment: gmail-scrollbars.png

This is still an issue, here's a screenshot - notice the unnecessary horizontal scrollbar in the messages panel.

Comment 5

[Ryan VanderMeulen [:RyanVM]]

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.

Comment 6

[Karl Dubost💡 :karlcow]

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

[Karl Dubost💡 :karlcow]

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.

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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

[Karl Dubost💡 :karlcow]

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

Comment 10

[Chris Lord [:cwiiis]]

Attachment: 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

[Karl Dubost💡 :karlcow]

Attachment: 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

Comment 12

[Karl Dubost💡 :karlcow]

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.

Comment 13

[Karl Dubost💡 :karlcow]

I'm reopening and maybe mike or hallvord will have a better idea on the differences.

Comment 14

[Mike Taylor [:miketaylr]]

Attachment: 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?

Comment 15

[Mike Taylor [:miketaylr]]

Attachment: 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.

Comment 16

[Mike Taylor [:miketaylr]]

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?

Comment 17

[Karl Dubost💡 :karlcow]

Switched to Web Compatibility.
Contacted Google about it.

Comment 19

[Will]

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)

Comment 20

[Mike Taylor [:miketaylr]]

(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

[Will]

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

Comment 22

[Mike Taylor [:miketaylr]]

Thanks for the update!

Comment 23

[Sergiu Logigan [:sergiu]]

Attachment: Screenshot_2.png

Attaching a new screenshot, for the new GMail design.

Comment 24

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 25

[Oana Arbuzov [:oanaarbuzov]]

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

Comment 26

[Raul Bucata]

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