Scroll lock when zoomed in or higher display DPI scaling is used

[abdonkov]

On certain zoom levels or higher display DPI scaling your scroll to bottom functionality can hang (go into infinite loop I guess) and thus lock the scrolling (always trying to scroll to the bottom).

You can see it in your own demo: https://compulim.github.io/react-scroll-to-bottom/

I have FullHD (1920x1080) monitor and use normal (100%) windows display scaling.
When setting the Chrome browser zoom level to 110% and 125% and clicking the scroll to bottom button, the scroll is locked and trying to scroll to the bottom infinitely.

(Page refresh may be needed after changing the zoom on some zoom levels).
Also tested with Edge on your demo but was not able to reproduce it even though it happened when I was using it. It can depend on the element height also for sure.

When custom display scaling is used or simulated with the browser zoom the Element.scrollTop property can be a decimal as described on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

I guess you have a problem in the check when the element has scrolled to the bottom and it keeps trying to do it infinitely. Also I was able to reproduce it only with the scroll to bottom functionality and not with the scroll to top so it could be because of scrollTop not being an integer when an element is scrolled to the bottom.

This became more of an essay, but you got the point hopefully :).

PS (image with 110% zoom):

upper temp1.scrollTop is after scrolling to bottom with the mouse wheel
lower is after clicking your scroll to bottom
Note: how the upper is higher than scrollHeight - clientHeight

[compulim]

I saw the similar problem too on the recent release (a.k.a. few days ago).

Need to fix this quick, and really thanks for the link and repro steps. Super helpful.

Maybe we should change the threshold from 0 to 1.

[compulim]

@abdonkov I discover more issues when working on "infinite scrolling" problem.

No worries about the essay, more concise is better.

I think you are legit, SpineTo.js is our animator. It use square stepper, which essentially calling Math.sqrt() for every step. The animation will stop if the delta is < 0.5. But it will never happen because of the nature of square root. I will update it to < 1.5.

Then another issue is filed in #13, you can look at the investigation there.

[compulim]

This is out on @1.3.1. 😄