1693399 - Can't scroll through the chatbox on https://fromtherupture.eyebeam.org/events/rashaad-newsome-in-conversation-with-legacy-russell

Status: RESOLVED INCOMPLETE

(Web Compatibility :: Site Reports, defect)

Description

[Anny Gakhokidze [:annyG]]

1. Navigate to https://fromtherupture.eyebeam.org/events/rashaad-newsome-in-conversation-with-legacy-russell
2. Enter a nickname
3. In the lower right corner, try to scroll through the chat
   Actual:
   The chat window is fixed and the text input is not visible
   Expected:
   Able to scroll through the chat window and the text input for messaging in chat is visible.

This works in Chrome.

Comment 1

[Anny Gakhokidze [:annyG]]

Also reported here https://webcompat.com/issues/67259

Comment 2

[Timothy Nikkel (:tnikkel)]

The message container doesn't scroll because it's height is very large, large enough to contain all the messages I guess. In Chrome the message container is not large. The height seems to come from an ancestor dom element:

<aside class="sidebar svelte-1fwojnu" aria-label="Show sidebar" role="button">

In Chrome it's 605 for me, in Firefox over 10000. The element has min-height: 100vh; and height: -webkit-fill-available; which we do not support. I don't see anything else that would give that element a height. So this seems to boil down to the page using -webkit-fill-available

Comment 3

[Karl Dubost💡 :karlcow]

This is being solved by adding

/* bundle.css | https://fromtherupture.eyebeam.org/build/bundle.css */

.sidebar.svelte-1fwojnu.svelte-1fwojnu {
  bottom: 0;
}

With this the bottom input appears and the window is not insanely tall.

There's probably something about the parent box.

Comment 4

[Karl Dubost💡 :karlcow]

note that if they were adding -moz-available it would have no influence on height. This is Bug 527285 so maybe there's a dependency here.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

They could just use height: 100vh, right? It's a fixed-pos element... Why are they using -webkit-fill-available?

Comment 6

[Emilio Cobos Álvarez (:emilio)]

They could also be using just height: 100%

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Or bottom: 0 and it'd stretch as comment 3 says. There's tons of ways to do what they want to do in all browsers, I'm baffled about why they use prefixed values without fallback instead. :(

Comment 8

[Karl Dubost💡 :karlcow]

Yes. They have been contacted on GitHub.
See https://webcompat.com/issues/67259
closing as incomplete by lack of a better keyword.