Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chrome scrollbar out of sync with height of long document #1086

Open
hubgit opened this issue Feb 22, 2023 · 6 comments
Open

Chrome scrollbar out of sync with height of long document #1086

hubgit opened this issue Feb 22, 2023 · 6 comments

Comments

@hubgit
Copy link
Contributor

hubgit commented Feb 22, 2023

Describe the issue

For as long as I can remember, it's been slightly difficult to scroll to the end of a long CM6 document in Chrome, as the scrollbar handle is out of sync with the document height.

I recently noticed that neither Firefox or Safari have this problem, so maybe it's a Chrome bug?

cm6-scrollbar.mov

Browser and platform

Chrome, macOS

Reproduction link

https://codemirror.net/try/?c=aW1wb3J0IHtiYXNpY1NldHVwLCBFZGl0b3JWaWV3fSBmcm9tICJjb2RlbWlycm9yIgppbXBvcnQge2phdmFzY3JpcHR9IGZyb20gIkBjb2RlbWlycm9yL2xhbmctamF2YXNjcmlwdCIKCm5ldyBFZGl0b3JWaWV3KHsKICBkb2M6ICJoZWxsbyBoZWxsbyBoZWxsbyBoZWxsbyBoZWxsbyBoZWxsbyBoZWxsbyBoZWxsbyBoZWxsbyBoZWxsbyBoZWxsbyBoZWxsbyBoZWxsbyBoZWxsbyBoZWxsbyBcbiIucmVwZWF0KDEwMDAwKSwKICBleHRlbnNpb25zOiBbCiAgICBiYXNpY1NldHVwLCAKICAgIGphdmFzY3JpcHQoKSwgCiAgICAvLyBFZGl0b3JWaWV3LmxpbmVXcmFwcGluZwogIF0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5Cn0pCg==

@hubgit hubgit changed the title Chrome scrollbar out of sync with long document Chrome scrollbar out of sync with height of long document Feb 22, 2023
@marijnh
Copy link
Member

marijnh commented Feb 27, 2023

Chrome on Linux does not appear to have this issue. I guess your screenshot is from macOS? Maybe it's using the native scrollbar in some way that causes this. The height of the editor document will change as you scroll down (since the editor starts with an estimated height, and then measures the actual height of the content as it is drawn). It's possible Chrome on your platform is somehow not handling scroll height changes during a scrollbar drag correctly. That's probably not something CodeMirror can avoid.

@hubgit
Copy link
Contributor Author

hubgit commented Feb 27, 2023

Correct, this is Chrome on macOS. I'll investigate further and see if there are any relevant issues already reported.

the editor starts with an estimated height, and then measures the actual height of the content as it is drawn

In the demo linked above, there's no line wrapping and no decorations, so all the lines have the same height, in which case I would expect that an estimated height based on the number of lines would be correct? That's just an aside though, this still needs to handle wrapped lines of varying sizes, so getting the initial height correct (if it isn't already) would only be a first step.

@marijnh
Copy link
Member

marijnh commented Feb 27, 2023

Indeed, you are right—in this demo the estimated content height doesn't actually change during scrolling, so that's not it. Maybe something related to the somewhat large height of the scrolled content? I'll see if I can isolate the cause the next time I have my Apple laptop nearby.

@hubgit
Copy link
Contributor Author

hubgit commented Feb 27, 2023

Some more weird experimentation: in this demo, the scroll bar is incorrect, but if I remove one character from the line or reduce the number of lines by one then the scroll bar becomes correct. There seems to be a threshold at which the calculation becomes incorrect, for some reason.

@marijnh
Copy link
Member

marijnh commented Feb 28, 2023

I'm not getting this effect on macOS Chrome 110 for some reason. But maybe that's because I'm scrolling with a touchpad rather than a real mouse.

@hubgit
Copy link
Contributor Author

hubgit commented Feb 28, 2023

Strange… I'm also using Chrome 110 and a MacBook touchpad.

A bit more experimenting: it seems to happen only at 100% and 200% page zoom, but not at any other zoom level I've tried, if I reload the page after changing the zoom level.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants