Urbit: Chat doesn't scroll in firefox

[philipcmonk]

Don't see an actual issue for this, and it comes up often. This has been broken for a while now, is there any fix on the horizon?

[matildepark]

It comes from nested flexbox. See here and here.

I can't find the ticket, but I recall @loganallenc saying that it's essentially a browser bug on Flexbox spec, not our bug — I mean, Safari and Chrome both handle it.

(FWIW, when reimplementing chat I tried the hack provided in those queries but to no avail. We would basically have to rethink the layout entirely, I think, avoiding nesting flexboxes.)

[philipcmonk]

So our answer is... don't support Firefox? If it's been a bug for five years, Firefox isn't going to fix it any time soon, which makes it our bug.

[tacryt-socryp]

Yes. We do not support Firefox.

[philipcmonk]

There's a few ways to get a scrollbar, the most straightforward of which is to spit this div into two nested ones, where the outer one has overflow-y-scroll and the inner one has flex flex-column-reverse.

https://github.com/urbit/urbit/blob/73cffdb28ff3baf2f11c376ae867725dee3ca5ba/pkg/interface/chat/src/js/components/chat.js#L255-L258

What I don't know is how to get it to open at the bottom instead of the top and auto-advance down when new messages come in.

[litpub]

I've been exploring another option, which is to throw out flex-column-reverse, and use the existing scrollToBottom when new messages come in.

This shows it working in FF:

But it's a bit of a hoax in that I'm just calling scrollToBottom in all componentDidUpdate calls. I'm trying to get it to be smarter, and only do so on new message receipt, but it appears that prevProps.envelopes.slice(0).length and props.envelopes.slice(0).length are always the same value

[litpub]

https://github.com/litpub/urbit/commit/14f9d44fff4e71fa0bdc48ac4980df0b5c793f2f

[litpub]

This is merged into os1-rc now

[matildepark]

Most recently fixed as of #2733; previous attempts included #2295, #2438, but we have redundant chat implementations to tide us over until Mozilla tackles their bug.