1902967 - andisearch.com - Unable to type, suggestions overlap with the chat input field

Status: RESOLVED WORKSFORME

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

Description

[Calin Tanase]

Environment:
Operating system: Android 13
Firefox version: Firefox Mobile 127/129

Steps to reproduce:

1. Go to https://andisearch.com
2. Observe the chat input field

Expected Behavior:
The suggestions are above the input field.

Actual Behavior:
The suggestions overlap with the input field.

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in Firefox Nightly, Firefox Release
• Does not reproduce in Chrome

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

Comment 1

[Calin Tanase]

Attachment: FF vs Chrome.png

Comment 2

[aminought]

Any progress?

Comment 3

[Jeff Muizelaar [:jrmuizel]]

This is different in Nightly now but still wrong.

Comment 4

[Botond Ballo [:botond]]

I'm seeing two issues in a recent Nightly:

1. Before the keyboard is shown, the dynamic toolbar has static behaviour (does not hide), and the page is not scrollable, even though the page contents are tall enough that some of the contents (namely, the suggestions) are covered by the toolbar.
2. After the keyboard is shown, the page is laid out in such a way that the suggestions overlap the input field.

Adding [apz-needsdiagnosis] for further investigation.

Comment 5

[Daniel Holbert [:dholbert]]

So the main issue I'm seeing locally is that the suggestions are positioned just off the bottom of the screen, at first-load (I can see the top edge of their bubbles). And then when you tap the textbox and bring up the keyboard, the suggestions move up and cover the textbox.

I think the root issue here is that the site is relying on -webkit-fill-available (specifically in min-height).

This reliance ends up making the body taller than the viewport, because the site is asking for the body to be that tall, if you don't support -webkit-fill-available. And then they position the suggestions relative to the bottom of the body.

For more details -- here's the relevant CSS:

body, html {
  height: 100%;
}
body {
[...]
    min-height: 100vh;
    min-height: -webkit-fill-available;
[...]
}
body { position: fixed }

For now, Firefox rejects min-height: -webkit-fill-available and so instead falls back to the prior value, min-height:100vh, which I guess resolves to the viewport-size-as-if-the-toolbar-were-hidden -- or at least, to something a bit taller than the viewport that's actually shown. However, even though the body is overflowing, it doesn't create scrollbars, because it's "position:fixed" (and overflow from positioned:fixed stuff isn't scrollable). This explains Botond's observation #1.

Then, the suggestions-bar is positioned like so:

  .lw-suggestions-container {
    position: absolute !important;
    bottom: 5.7rem;
}

That's positioned with respect to the body (which is itself position:fixed, and hence serves as an abspos containing block). Since the body is a bit taller than the area that you can see, the bottom:5.7rem is with respect to a line that's just offscreen, which isn't what the site wants.

HACKAROUND: If I untick the min-height:100vh declaration on the body here, then everything Just Works (the height:100% takes over and sizes the body to the appropriate size that the site wants it to be, which gets the lw-suggestions-container in the right spot). This makes the suggestions show up above the input box, at the intended location, both in the initial layout and also when the keyboard appears.

Things works as-expected in Chrome because min-height: 100vh is the troublesome (too-tall) CSS here, and that gets overridden with the more-benign -webkit-fill-available in Chrome (which just resolves to the same thing that height:100% already resolves to, and hence has no effect).

So: bottom-line, I'm pretty sure we can consider this a version of -webkit-fill-available breakage.

Comment 6

[Daniel Holbert [:dholbert]]

I suspect this will have improved with bug 1933408 (and about:config pref layout.css.webkit-fill-available.enabled manually enabled).

Testing in today's Nightly on desktop with RDM, I'm seeing that the site design has changed since this bug was filed, and this "suggestions bar" doesn't show up anymore in Firefox or Chrome (and it still didn't show up after I submitted a few prompts). So this is essentially WORKSFORME via a change to the site.

(That suggestions-bar does still exist in the DOM, though, as <div class="lw-suggestions-container"> -- it's just display:none. If I untick that display:none declaration, then it shows up. I can't tell if it's in a better spot, though, because the bad placement depended on the dynamic toolbar (which I can't emulate in RDM). I also don't know if any actions on the site will cause it to show up without manual devtools tweaks; there's no settings UI that I can see or anything like that.)

I'll circle back here and retest once I've got an updated nightly available on Android, but in the meantime I think we can consider this one WFM via site changes.