Chrome - removing lines when the editor (vertical) scrollbar is close to the end makes the page scrolls

[ggrossetie]

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

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]

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]

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]

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]

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]

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]

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]

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

[wjxxx0201]

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