1987349 - www.google.com - AI Mode input field shows unnecessary scroll bar at the top

Status: VERIFIED FIXED

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

Description

[Raul Bucata]

Environment:
Operating system: Mac OS X 10.15
Firefox version: Firefox 144.0

Preconditions:
VPN set to the US

Steps to reproduce:

1. Navigate to: https://www.google.com/search?udm=50&aep=11
2. Observe the input field

Expected Behavior:
The input field is rendered as expected

Actual Behavior:
There is a visual glitch showing a div horizontal scroll bar at the top

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/175890

Comment 1

[Raul Bucata]

Attachment: Chr vs ff

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

This bug might be relevant with bug 1977310, that one is not horizontal scrollbar, it's vertical though.

Comment 4

[Jeff Muizelaar [:jrmuizel]]

There's a:

.iLxK4c::-webkit-scrollbar {
    display: none;
}

Removing that makes the scrollbar appear in Chrome

Comment 5

[Daniel Holbert [:dholbert]]

Google folks say that this should be fixed by a change that they deployed -- Raul, can you still reproduce? If not, lets close this as fixed. Thanks!

Comment 6

[Haik Aftandilian [:haik]]

(In reply to Daniel Holbert [:dholbert] from comment #5)

Google folks say that this should be fixed by a change that they deployed -- Raul, can you still reproduce? If not, lets close this as fixed. Thanks!

It's still reproducible at this time.

Comment 7

[Daniel Holbert [:dholbert]]

hmm, I can reproduce too, yeah (just tested Firefox 142 in Windows 10 via BrowserStack) Looks just like the Firefox part of the screenshot in comment 1.

Comment 8

[Daniel Holbert [:dholbert]]

It looks like it's still from an element with class="iLxK4c" (which has overflow-x: scroll explicitly specified in their CSS).

If I add scrollbar-width:none to that element (which is the standard way to do the thing in comment 4), then the scrollbar goes away.

Comment 9

[Daniel Holbert [:dholbert]]

Just retested (in Firefox 142 on Win10, with traditional scrollbars), and I can't reproduce anymore. This might be fixed again -- Haik/Jeff/Raul, can any of you still reproduce?

Comment 10

[Daniel Holbert [:dholbert]]

Aha, I do see the CSS that we suggested (scrollbar-width: none) being used in the page's CSS:

.iLxK4c {
[...]
	overflow-x: scroll;
[...]
	scrollbar-width: none;
}

So it looks like they've (re?)-deployed the fix.

I think we can close this as FIXED by Google folks, but please reopen if you still see it.

Comment 11

[Haik Aftandilian [:haik]]

(In reply to Daniel Holbert [:dholbert] from comment #9)

Just retested (in Firefox 142 on Win10, with traditional scrollbars), and I can't reproduce anymore. This might be fixed again -- Haik/Jeff/Raul, can any of you still reproduce?

I can no longer reproduce it on macOS. Works for me.

Comment 12

[Jeff Muizelaar [:jrmuizel]]

I can't reproduce anymore either.

Comment 13

[Daniel Holbert [:dholbert]]

Thanks!

Comment 14

[Calin Tanase]

Verified, the issue no longer reproduces.

Tested with:

• Browser / Version: Firefox 144.0-candidate build 1
• Operating System: Windows 10