chatscope / chatscope/chat-ui-kit-react
1px fix for Firefox not necessarily working
- Dominant language
- JavaScript
- Stars
- 1.8k
- Forks
- 154
- PR merge metrics
- No merged PRs in 30d
Description
Hi there,
I began testing scroll behavior for the component on Firefox and I noticed it was doing this strange thing when I would scroll to the end of my messages. It would let me keep scrolling past the end of my messages, but at a very slow pace:

I dug into the [MessageList](https://github.com/chatscope/chat-ui-kit-react/blob/master/src/components/MessageList/MessageList.jsx) component to see if I could find anything that would cause this odd behavior.
I did notice there was a few blocks that mentioned a 1px fix for Firefox and thought maybe that had something to do with it.
```javascript
// 1 px fix for firefox
const sticky =
list.scrollHeight === topHeight ||
list.scrollHeight + 1 === topHeight ||
list.scrollHeight - 1 === topHeight;
```
and
```javascript
// If was sticky because scrollHeight is not changing, so here will be equal to lastHeight plus current scrollTop
// 1px fix id for firefox
const sHeight = list.scrollTop + this.lastClientHeight;
if (
list.scrollHeight === sHeight ||
list.scrollHeight + 1 === sHeight ||
list.scrollHeight - 1 === sHeight
) {
if (autoScrollToBottom === true) {
this.scrollToEnd(this.props.scrollBehavior);
this.preventScrollTop = true;
}
} else {
this.preventScrollTop = false;
}
```
I decided to set a breakpoint at one of these positions and noticed that, on Firefox, `list.scrollHeight` is not consistent at all. Every hover over `list.scrollHeight` resulted in a different height, some as far as 4px off from the `topHeight`. See my gif below:

Now, I'm not 100% sure what these "1px checks" are doing, but I think its safe to say that even a 1px margin of error is not enough. Ideally there is a way to not rely on these "1px checks." It may also help to specifically check if the scroll position has gone past either end of the content and just reset it then.
Thanks!
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.