Bugzilla

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, 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:
```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:
```css
  .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.

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:
```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:
```css
  .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.