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 - removing lines when the editor (vertical) scrollbar is close to the end makes the page scrolls #721

Open
ggrossetie opened this issue Feb 8, 2022 · 8 comments

Comments

@ggrossetie
Copy link

In the following screen-cast, I'm inserting blank lines using <Enter> and removing them using <Del>:

codemirror6-scroll-parent

As you can see, the page is scrolling.
I cannot reproduce this issue on Firefox 96.

Chrome version 98.0.4758.80 (64 bits) on Linux.

@marijnh
Copy link
Member

marijnh commented Feb 8, 2022

This looks like some very obscure Chrome misbehavior—it randomly moves the scroll position of the window as the editor updates its internal DOM (the scroll happens during the drawSelection plugin moving its cursor, or if I turn that off, when the editor removes the deleted line from the DOM). Unfortunately, I haven't found a workaround. Blurring the editor avoids the effect, but that's a disruptive, user-visible thing to, even if we re-focus it immediately.

@ggrossetie
Copy link
Author

Thanks for your analysis.
For what it's worth I can also reproduce this (mis)behavior with Chrome version 100.0.4867.0 dev (64 bits).

Let me know if I can be of any help 🤗
(For the record, I did try to comment some code in https://github.com/codemirror/view/blob/main/src/docview.ts#L112-L126 to prevent the window scroll but without success, I will take a closer look at https://github.com/codemirror/view/blob/main/src/draw-selection.ts)

@marijnh
Copy link
Member

marijnh commented Feb 9, 2022

The behavior seems to be related to where the selection is—I could suppress the problem as it is caused by the doc DOM update by moving the selection out of the deleted line before removing it. But I didn't find a way to avoid the issue with drawSelection enabled, or figure out why setting the height of an absolutely positioned node that isn't even near the selection in the DOM triggers this issue.

I spent a bit of time trying to set up a CodeMirror-less contentEditable div that triggers this, but didn't succeed, so though the effect happens precisely on innocent-looking DOM changes, it's possible that some other factor, which I haven't identified yet, is also involved.

@thomas992
Copy link

thomas992 commented Mar 19, 2022

commenting line 380 on editorview.ts resolves the issue
//this.docView.scrollIntoView(this.viewState.scrollTarget)

there is an odd behavior where if you are at the top of the screen it will not trigger. This suggested to me to be part of CodeMirror's code and not the browser reacting to DOM. There should be logic here to determine the y value of active line or whatever and check if it is already in the display window.

@marijnh
Copy link
Member

marijnh commented Mar 21, 2022

commenting line 380 on editorview.ts resolves the issue

Are you sure? The scroll doesn't originate there for me, but rather during the DOM manipulations for the content update.

@thomas992
Copy link

commenting line 380 on editorview.ts resolves the issue

Are you sure? The scroll doesn't originate there for me, but rather during the DOM manipulations for the content update.

you are right. A hack could be to record document.scrollingElement.scrollTop and reset it after the update..

@JeanSamGirard
Copy link

Is there a workaround ?
It seems to still be an issue as of Chrome 123.0.6312.86

@wjxxx0201
Copy link

wjxxx0201 commented Aug 7, 2024

I found a way.
https://stackoverflow.com/questions/64146765/scroll-position-affected-by-internal-layout-changes-inside-a-page-element-chrom
It works by adding 'overflow-anchor: none;' to cm-scroller.
@marijnh @ggrossetie @thomas992 @JeanSamGirard

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

5 participants