Markdown Preview pane Scrolling Unhelpfully

[Obscure2020]

Does this issue occur when all extensions are disabled?: No, but I don't think the extension is at at fault. Please read the rest of the story.

• VS Code Version: 1.64.2
• OS Version: Windows_NT x64 10.0.19044

So here's what happened. I began working last week on a new pet project, a silly idea for an esoteric programming language. Before I develop an interpreter around my ideas, I thought I'd lay my ideas out in full by writing out the documentation on how the project will function once it's completed.

I'm writing out my ideas in Markdown, intended for easy reading in the GitHub repo for my project. Because GitHub is the only site I ever write Markdown for as of now, I installed an extension that restyles my Markdown preview pane to GitHub's dark mode styling: Dark Github Markdown Preview.

While writing, I noticed some strange behavior in the preview pane related to scrolling. For ease of description, I used OBS to record a video of my findings:

I'm not completely sure, but I think this may actually be a VSCode issue, not an issue with the extension. You see, when I disable this extension and return the preview pane to it's default, built-in styling, these issues disappear. When I took a look at the repo for this extension, though, it seemed to be just a .css reskin. Unless I'm a dunce and I missed something significant, there isn't really much code in this extension, and therefore the faulty scrolling would be the fault of VSCode, where the scrolling code exists.

My theory is that the scrolling code (both scrolling the preview pane when the source pane is scrolled, and scrolling the preview pane to the currently-updated spot when you type in the source pane) inside VSCode doesn't take into account the possibility that the preview pane could be restyled to different fonts, spacings, or styles. Maybe the auto-scrolling code operates based on hardcoded values for font-sizing/spacing/line-height rather than the actual size of the text as displayed, taking into account user-installed style modifications?

[Obscure2020]

Just in case it's not clear from the video, here's a textual description of the issues:

1. When you scroll all the way down in the preview pane, the source code pane scrolls all the way down to follow. That works fine. However, when you scroll all the way down in the source pane, the preview pane doesn't scroll all the way down. This is broken.
2. If you scroll the source pane and the preview pane both down to the bottom, then type new text at the bottom of the file, the preview pane suddenly jump-scrolls up a little bit, scrolling the new text you just typed off of the screen.

Both of these are unhelpful, and both of these aren't broken (work properly) when you don't use any markdown-preview-styling extensions.

[Obscure2020]

I can confirm issue still present in VSCode version 1.65.1.

[Obscure2020]

I just realized there's a setting that I use that may be contributing to this issue:

"editor.scrollBeyondLastLine": false

I prefer this setting because its what I'm used to, coming from other code editors in the past. This setting is why "scrolling to the bottom" is such a concretely-defined thing for me. I'm sorry I didn't mention it earlier.

[mjbvz]

Does this reproduce in the latest VS Code insiders build with all extensions disabled?

If so, can you please share a markdown file and steps I can use to reproduce this issue

[Obscure2020]

Why would I test this with all extensions disabled? I already stated, at the very top of this thread, that this issue only comes up when I am using the Dark Github Markdown Preview extension.

[mjbvz]

Please test with insider too and provide steps to reproduce the problem

[Obscure2020]

Okay, so I just re-tested this in the latest Insiders build. The bug is still present. Here's my version information:

Version: 1.67.0-insider (user setup)
Commit: a7a7f209ade96c516ce3cd9b330aa8c3db816223
Date: 2022-04-14T05:15:18.304Z
Electron: 17.4.0
Chromium: 98.0.4758.141
Node.js: 16.13.0
V8: 9.8.177.13-electron.0
OS: Windows_NT x64 10.0.19044

Here are the instructions for recreating the bug:

1. Begin with all extensions disabled in VSCode.

2. Download this Readme.md and open it in VSCode. Please make careful note of the fact that there is nothing special about this file other than the fact that it should be too long to fit entirely on your screen.

3. Open your VSCode settings, and make sure the following setting is turned OFF:\ \ If you open the settings .json, this setting should appear thusly:\

4. Go back to the Readme.md tab and open the split-screen preview window. Your view should now look something like this:\

5. Hover your mouse over the Code pane. (The pane on the left.) Using your scroll wheel, scroll the Code pane up and down a few times. Scroll from the top to the bottom and back and forth. Make careful note of what the Preview pane does while you're scrolling the Code pane. What you should be seeing is that when the Code pane is scrolled all the way to the top, the Preview pane is too, and when the Code pane is scrolled all the way to the bottom, the Preview pane is as well.

6. Move the editing cursor to the end of the Readme.md file, and press Enter twice to start a new paragraph. Begin typing a new sentence. (You will need to type this, not paste it, to see the effect.) Let's say you start typing this, for instance:\

7. What you should notice is that while you type, the Preview pane will automatically scroll down to show you the new text you just added without you having to use your scroll wheel.\

8. Erase the new paragraph we just wrote. We're going to perform the second half of the test now. (The file should now once again end with some opcodes may modify the way the words that follow it are treated.)

9. Install and enable this extension:\

10. Close and reopen the preview pane to apply the new styling. It should now look like this:\

11. Hover your mouse over the Code pane. (The pane on the left.) Using your scroll wheel, scroll the Code pane up and down a few times. Scroll from the top to the bottom and back and forth. Make careful note of what the Preview pane does while you're scrolling the Code pane. What you should be seeing is that when the Code pane is scrolled all the way to the top, the Preview pane is too, but when the Code pane is scrolled all the way to the bottom, the Preview pane for some reason does not scroll itself down to the bottom. It cuts off the last few lines.\

12. Once again, move the editing cursor to the end of the Readme.md file, and press Enter twice to start a new paragraph. Once again, type the following new sentence, and watch the Preview pane carefully while you type:\

13. What you should notice is that while you type, the Preview pane will not automatically scroll down to show you the new text you just added. Instead, if you watch carefully, you should notice the Preview pane jittering up and down just slightly while you type. While you're typing, the Preview pane will stubbornly refuse to show you the new text you're typing. It should remain cut off, like this:\

[Obscure2020]

Bug still present. Current version information:

Version: 1.68.0-insider (user setup)
Commit: d891b49fc0f8fc5e00591657ca225975952b09ca
Date: 2022-05-25T05:16:10.962Z
Electron: 17.4.4
Chromium: 98.0.4758.141
Node.js: 16.13.0
V8: 9.8.177.13-electron.0
OS: Windows_NT x64 10.0.19044

[Obscure2020]

Bug still present. Current version information:

Version: 1.71.0-insider (user setup)
Commit: 73fd3f11032e7b83c2ae011b5516e6ddd19e3db2
Date: 2022-08-05T07:36:58.753Z
Electron: 19.0.11
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Windows_NT x64 10.0.19044
Sandboxed: Yes

[MuTsunTsai]

I'm experiencing similar bug (with all extensions disabled), but a lot worse than what's in the video. The scrolling of the preview pane jumps like insane. This only happens since about a month ago.

版本: 1.70.2 (user setup)
提交: e4503b30fc78200f846c62cf8091b76ff5547662
日期: 2022-08-16T05:35:13.448Z
電子: 18.3.5
Chromium: 100.0.4896.160
Node.js: 16.13.2
V8: 10.0.139.17-electron.0
作業系統: Windows_NT x64 10.0.22000

By the way, translate "Electron" to "電子" is really stupid here.

[Obscure2020]

Bug still present. Current version information:

Version: 1.73.0-insider (user setup)
Commit: a8108049ab61b970f2ec1839dfb753054e07395e
Date: 2022-10-13T05:19:31.002Z
Electron: 19.0.17
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Windows_NT x64 10.0.19044
Sandboxed: Yes

[xtiandiaz]

Getting the same bug here:

Version: 1.83.0 (Universal)
Commit: e7e037083ff4455cf320e344325dacb480062c3c
Date: 2023-10-03T16:13:15.449Z
Electron: 25.8.4
ElectronBuildId: 24154031
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Darwin arm64 21.6.0

Somewhat annoying 😞

[theetrain]

I'm experiencing scroll issues when I have this setting enabled:

{
  "editor.stickyScroll.enabled": true
}

With scoped sticky scrolling disabled, the problem goes away. It would be nice to have the markdown preview pane not be interrupted by nested markdown headings that appear sticky in the editor.