(WEBUI) Spacebar key to go to next page breaks with browser zoom & some image aspect ratios

[Asinin3]

LRR Version and OS
LRR 0.9.30 W11, Using FireFox

Relevant Line of code that needs to be changed:

LANraragi/public/js/reader.js

Line 13 in 8b97094

if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {

Bug Details
When viewing a gallery you're supposed to be able to push spacebar to go to the bottom of the page, then hit it again to go to the next page. However if my browser is not at 100% zoom, this functionality breaks for all galleries. However, even at 100% zoom, it still breaks on some pages if the scroll bar is in use. Notably this means users who use Fit To "Container" or "Width" setting will run into it breaking constantly.

I tested dozens of galleries, some would have the spacebar stop working on the first page, some at pages much later on. I noted down all the resolutions of each page and where it broke, to try and work out if it was caused by a later page exceeding the size of a previous page... thinking it might be some div fuckery but that wasn't it.

The issue is simply caused by the aspect ratio of the images:

2106 x 2962 (Spacebar working)
1998 x 3001 (Spacebar working)
2008 x 2993 (Spacebar broken, cant go to next page)
2060 x 3038 (Spacebar broken, cant go to next page)
2044 x 3040 (Spacebar broken, cant go to next page)
2577 x 3679 (Spacebar working)
5154 x 3679 (Spacebar working)
2646 x 3679 (Spacebar broken, cant go to next page)
5154 x 3679 (Spacebar working)
1300 x 1841 (Spacebar broken, cant go to next page)
2288 x 3200 (Spacebar broken, cant go to next page)
2287 x 3200 (Spacebar works)
1917 x 2934 (Spacebar broken, cant go to next page)
1300 x 1869 (Spacebar works)

My best theory is that the code doesn't work with fractual pixels, if the aspect ratio results in a fractual pixel. E.g the height ends up as 1000.7 and rounds up to 1001, instead of down to 1000, causing it to break because it thinks its not at the botom of the page?

Proposed Solutions
I tried testing these myself, but because Firefox Devtools affected the page height it made it impossible without building..

if ( element.scrollTop == (element.scrollHeight - element.offsetHeight) ) { From: https://stackoverflow.com/posts/54935662/revisions
if ((window.innerHeight * window.devicePixelRatio + window.scrollY) >= document.body.offsetHeight * window.devicePixelRatio) { from chat GPT (Should account for browser scaling, but i think it might still break with the aspect ratio issue? May need to offset by an extra 1px somehow)

Theres many other ways to do it listed on https://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom-not-just-the-window-but-any-element not sure whats best.

[Asinin3]

@Difegue Unfortunately the exact same issue is occurring in new release, works only when at 100% zoom, and even then still breaks on some images depending on the dimensions.

As an added suggestion, could space-bar scroll down to the bottom of the image, not the page. Then pushing it again goes to the next page? This would be better - more of the image would stay on screen.

[Difegue]

that's unfortunate; I'm not able to repro the issue myself so I can't really do much besides shots in the dark.

If it helps you, it's possible to move the firefox devtools to a separate window, so they wouldn't interfere with the window size anymore when testing.

[Asinin3]

Strange that you cant reproduce it, it happens for me with a fresh install of chrome too.