don't use contentVisibility on Firefox

[haileyok]

Why

The content-visibility style on Firefox is causing problems with the List implementation - at least for the list we use for chat conversations.

This PR just checks the useragent for Firefox and does not use this style - the same way we do not use it for Safari - if it matches.

Test Plan

With this PR, the chat list should be fine on Firefox.

Screen.Recording.2024-05-21.at.11.40.56.PM.mov

[render]

Your Render PR Server URL is https://social-app-pr-4164.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-cp6p7cv79t8c73ast0d0.

[haileyok]

@gaearon I mentioned in Slack that I'm not certain what we're using this style for. It isn't (visibly anyway?) causing problems elsewhere in the app that we know of, so if it is useful for some reason we can scope this down further, maybe with a prop on List.

[github-actions]

Old size	New size	Diff
6.87 MB	6.87 MB	50 B (0.00%)

---

[mary-ext]

content-visibility is a rendering optimization for skipping work on the element entirely when the browser thinks it isn't visible.

It's guaranteed to ruin layout/scroll animations, because unless the browser knows it should render it, then the elements are assumed to have no height/width initially, which is what I presume is happening.

It can be remedied with contain-intrinsic-size which tells the browser the size it should assume, but I'd honestly recommend just turning it off for chat entirely in this case (on all browsers), since I don't imagine the users are going to do a lot of back and forward navigation from chat screen.

[haileyok]

Ah that does make sense. Kind of wonder if this is what causes the ghost scroll position issues for some people (the content flashing up and down the screen). We still get reports of that occasionally though have never been able to reproduce.

[mary-ext]

Hmm, it might be, and not sure if it's something that can be remedied easily too.

There is contain-intrinsic-size: auto which will make the element retain its previously-known size once it goes offscreen, but unfortunately that size measurement gets lost when it gets detached from DOM.

[mozzius]

Works like a charm