docs.google.com - Items from the drop-down menu are flickering when moving the mouse up and down

[cpeterso]

URL: https://docs.google.com/spreadsheets/d/1KMs7Lg_f3RMu_QLTAoMwcBQAG5z8xIJSyZ8QNIbfLgk/edit#gid=0

Browser / Version: Firefox 87.0
Operating System: Windows 10
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items are misaligned
Steps to Reproduce:

Steps to reproduce:

1. Open the Google Spreadsheet: https://docs.google.com/spreadsheets/d/1KMs7Lg_f3RMu_QLTAoMwcBQAG5z8xIJSyZ8QNIbfLgk/edit#gid=0
2. Hover the mouse pointer over a column name so the arrow button for the drop-down menu appears.
3. Click the arrow button to open the drop-down menu.
4. Slowly move the mouse pointer over the drop-down menu items, down and up.

Expected results

In Chrome on Windows and Firefox on macOS, the menu items should stay in the same position.

Actual results

In Firefox on Windows, the text of the menu item under the mouse pointer shifts down slightly. This is most noticeable if you move the mouse pointer up and down the menu, so you can see the menu items slightly shift up and down. If you zoom the screen using the "Windows Key + +" keyboard shortcut, you can see the menu item text under the mouse pointer has some subpixel antialiasing.

I can reproduce this behavior in Firefox versions as old as Firefox 70 (from 2019), so this is not a new Firefox regression.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-raul-bucata]

We appreciate your report. I was able to reproduce the issue. The items in the drop-down menu do not stay in the same position, as they seem to flicker left or right a little bit.

Tested with:
Browser / Version: Firefox Nightly 87.0a1 (2021-02-10) (64-bit)/ Chrome Version 88.0.4324.150 (Official Build) (64-bit)
Operating System: Windows 10 PRO x64

Moving this to NeedsDiagnosis for further investigations.

[karlcow]

@cpeterso so many issues with subpixels https://bugzilla.mozilla.org/buglist.cgi?quicksearch=subpixel&list_id=15605422

I wonder if any of these change the issue. They can be activated in about:config

gfx.text.subpixel-position.force-disabled
gfx.text.subpixel-position.force-enabled
gfx.webrender.quality.force-subpixel-aa-where-possible

Could you check @softvision-raul-bucata

[cpeterso]

I wonder if any of these change the issue. They can be activated in about:config

gfx.text.subpixel-position.force-disabled

I can still reproduce with force-disabled = true.

gfx.text.subpixel-position.force-enabled

I can still reproduce with force-enabled = true.

gfx.webrender.quality.force-subpixel-aa-where-possible

I can still reproduce with force-subpixel-aa-where-possible = true.

I also tested gfx.text.subpixel-position.force-enabled = true plus gfx.webrender.quality.force-subpixel-aa-where-possible = true and I could still reproduce.

[karlcow]

Thanks @cpeterso

[karlcow]

<div
  class="goog-menu goog-menu-vertical docs-material goog-menu-noaccel goog-menu-noicon apps-menu-hide-mnemonics"
  style="
    user-select: none;
    overflow-y: auto;
    height: auto;
    visibility: visible;
    left: 230px;
    top: 186.817px;
    display: none;
  "
  tabindex="-1"
  role="menu"
  aria-haspopup="true"
>
  <div
    class="goog-menuitem apps-menuitem"
    role="menuitem"
    style="user-select: none"
    name="trix-sort-sheet-asc"
    id=":1lv"
  >
    <div class="goog-menuitem-content">Sort sheet A → Zdiv>
  div>
  <div
    class="goog-menuitem apps-menuitem"
    role="menuitem"
    style="user-select: none"
    name="trix-sort-sheet-desc"
    id=":1lw"
  >
    <div class="goog-menuitem-content">Sort sheet Z → Adiv>
  div>
  <div
    class="goog-menuitem apps-menuitem"
    role="menuitem"
    style="user-select: none"
    name="trix-get-range-link"
    id=":1lx"
  >
    <div class="goog-menuitem-content">Get link to this rangediv>
  div>
div>

so on macOS I get this:

when there is no highlight

with highlight

.docs-gm .goog-menuitem.goog-menuitem-highlight {
	border-color: transparent;
	border-style: dotted;
	border-width: 1px 0;
	padding-top: 5px;
	padding-bottom: 5px;
}

And we can see a fraction for the width, but not for the height. I wonder how the box in windows.

.docs-gm .goog-menuitem {
	color: #202124;
	font-size: 14px;
	letter-spacing: .2px;
	line-height: 20px;
}

Difficult for me to test, like I'm not on windows. I was thinking about possible pixel rounding, and also font changes, but there is not synthetic bolding of the font. Or is it this 1px border which is different on windows and macos. hmm…

or something like this…
https://bugzilla.mozilla.org/show_bug.cgi?id=1411219

@emilio do you have an idea?

[emilio]

So they seem to be compensating one pixel of padding with one pixel of border, is that right?

That isn't guaranteed to work at all display scalings, see https://crisal.io/words/2020/06/13/rounding-borders.html, w3c/csswg-drafts#5210, and linked bugs.

So that probably fails also in Safari (and Chrome might or might not have aligned with Firefox and Safari here). So it's probably worth asking the Google folks to tweak their CSS to not do that. They can have a 1px border of the same color as the background always, and the highlight class could just change the border color. This has the extra benefit of not needing layout.

@cpeterso what's your window.devicePixelRatio?

[karlcow]

Thanks a lot!

on macOS my external screen, window.devicePixelRatio is 2.
I can't reproduce in Safari Tech Preview and Safari, but could be due to my screen configuration indeed.

[softvision-raul-bucata]

gfx.text.subpixel-position.force-disabled
gfx.text.subpixel-position.force-enabled
gfx.webrender.quality.force-subpixel-aa-where-possible

Could you check @softvision-raul-bucata

@karlcow gfx.text.subpixel-position.force-disabled -reproducible
gfx.text.subpixel-position.force-enabled -reproducible
gfx.webrender.quality.force-subpixel-aa-where-possible -reproducible

[cpeterso]

@cpeterso what's your window.devicePixelRatio?

My Windows' laptops' window.devicePixelRatio is 2.5. My Windows display scaling setting is "250% (Recommended)", which is the default on my laptop. My MacBook Pro's window.devicePixelRatio is 2.

If I adjust Firefo page zoom to make window.devicePixelRatio a whole number like 2 or 3, then I can no longer reproduce the vertical shifting of menu items (though I do see horizontal subpixel aliasing when I highlight menu items by mousing over them). If I adjust the page zoom to make window.devicePixelRatio not a whole number, then I can reproduce this bug on Windows and macOS.

[emilio]

Ok, so it seems that's clearly the problem described above: with fractional scaling (2.5dppx) a 1px border is 2 device pixels with the rounding rules above, not 2.5. So that causes one less pixel over-all which causes the issue.

@karlcow can you contact the docs folks about it pointing to the comment / proposed solution above? (Or I can do this otherwise)

[karlcow]

They have been contacted on the partner mailing list.

[softvision-raul-bucata]

The issue is no longer reproducible:

Tested with:

Browser / Version: Firefox Nightly 91.0a1 (2021-06-08) (64-bit)
Operating System: Windows 10 PRO x64

Closing this as FIXED