1px fix for Firefox not necessarily working about chat-ui-kit-react HOT 5 OPEN

UPDATE: I was able to duplicate this behavior in this Storybook Example by setting the font-size on the body tag to 0.875rem

from chat-ui-kit-react.

Hi @nzayatz14, thank you for the great research. I use Perfect scroll for scrolling and this issue has a long story here: https://github.com/mdbootstrap/perfect-scrollbar/issues/920

I thought I have finally resolved this problem, but it seems I have not :(
It's great that you have found how can it be reproduced. I will try to fight this.

Btw, the Perfect scrollbar has also some caveats with flexbox, so I'm working on an alternative scroll solution. It should be available in one of the next releases.

from chat-ui-kit-react.

Hey @supersnager, any updates on this?

from chat-ui-kit-react.

Hey @supersnager, I managed to find a work around for this until you get around to your scrolling rewrite.

Pull request can be found here.

Thanks,
Nick

from chat-ui-kit-react.

@nzayatz14 I have checked your solution but it unfortunately not works in the simplest test case.
What I checked?
I applied your fix, opened the Storybook, and set body font-size to 0.875rem like in your repro.

This not works because when the scroll event occurs the <MessageList /> component is not updated, so the code fixed by you is not executing.

But your work led me to some other ideas on how to deal with this issue.
IMO the problem still lies in the perfect scrollbar. It can be related to the toInt function which is often used there to get the pixel size from strings. Values passed to this function are from getBoundedClientRect and can be floating numbers, so they are truncated to an integer by parseInt. In some circumstances, this can lead to wrong size calculation.

Please be patient, I need to do more tests on different browsers and devices.

from chat-ui-kit-react.