Autoscrolling - Githubissues

wflouw commented 4 years ago

Hi, have used the VSCode Plug-in for a while to preview Mermaid diagrams and it worked fine. Recently (after vscode update) I noticed some strange scrolling phenomena. When I type (in a single line) both the Markdown-preview and readme.md editor-tabs auto-scroll up and down in an unpredictable manner.

pauloneves commented 4 years ago

Same problem here. My workaround is to temporarily move the diagram to the top of the file.

HanKruiger commented 3 years ago

Some additional information:

I tried to work around this by disabling sync (both ways) altogether:

"markdown.preview.scrollPreviewWithEditor": false,
"markdown.preview.scrollEditorWithPreview": false,

But the problem (at least partly) persists. The editor view doesn't scroll anymore, but the preview does (it always scrolls down).

kingsimba commented 3 years ago

Same problem +1. But your workaround is not helpful when you have multiple mermaid diagram in the same file.

Same problem here. My workaround is to temporarily move the diagram to the top of the file.

jroachgit commented 3 years ago

I too am experiencing this, but mine scrolls to the bottom every time. It's quite annoying when the diagram I am working on is the top one 👎

stefandeml commented 3 years ago

yeah ... only option I see for now is to temporarily disable the extension during editing and only use it for preview / review.

gimbo commented 3 years ago

I'm experiencing this (or something like it) too; for me, editing above the diagram is fine but any edits I make below the diagram cause the editor and preview to both scroll up a few lines (in a distracting and jumpy way) — so for me moving the diagram to the top would make the problem worse, and I need to move it to the bottom or (better, yes) disable the plugin while working on the document.

Demo video (silent): https://youtu.be/YOxVFjRMISo — any vertical movement before the 44 second mark is me scrolling the page, but after that it's just the crazy jumping happening on its own.

This is with a fresh install of VSCode, and all extensions disabled except this one, on a Mac running Big Sur (details below).

Versions

MacOS Big Sur 11.3.1 (20E241)

VSCode (fresh install today to check this):

Version: 1.56.2 (Universal) Commit: 054a9295330880ed74ceaedda236253b4f39a335 Date: 2021-05-12T17:44:30.902Z Electron: 12.0.4 Chrome: 89.0.4389.114 Node.js: 14.16.0 V8: 8.9.255.24-electron.0 OS: Darwin x64 20.4.0

Markdown Preview Mermaid Support version: v1.9.2

All other extensions disabled.

pearj commented 3 years ago

I've spent quite a while investigating this, and I found out a few things.

It jumps all over the place because the preview renders the code of the mermaid diagram first, and then quickly afterwards replaces it with the actual diagram.

I tried to using the mermaid API on the extension side (index.js), however the extension runs in NodeJS, and mermaid-js doesn't work in NodeJS. So I then tried using localStorage on the webview side to save the height of the rendered diagram and reapply it before trying to render the diagram. However, it's too late to add the previous height by the time the script runs (the script runs in async mode), and it doesn't help, so I tried adding a script in the generated html directly, but the script got blocked.

I tried putting a fixed height like this <div styles="min-height:30em" class="${pluginKeyword}">, and that does fix the problem for diagrams that are smaller than 30em, but it obviously makes the diagrams that high, which is not really a solution, but does prove what the issue is.

Basically we need a way for the webview to communicate with extension to let it know what the sizes of the mermaid diagrams are. It seems like Microsoft has gone out of it's way to stop this sort of thing. But I think if we embedded a http server inside the extension, then this would probably work, although it seems a bit of a kludgy solution. I can't think of another way to enable this communication, but then again I haven't written VSCode extensions before. I did discover that inside the webview you can find name of the markdown file by looking in the base element (document.querySelector("base").href). So that means if there was a webserver you could send the name of the file as well as the size of the diagrams, in-case you have multiple windows open. Running a webserver inside the extension would probably be a little bit fiddly, especially in the remote scenario like WSL or SSH, as it might not be easy to guarantee that the http server is always accessible.

@mjbvz is there a supported way to allow posting messages from the webview back to the extension. I can see at the top of the markdown preview webview there is a script for the vscodeApi that can post messages, although it removes to access to the VSCode API as soon as it runs. I think if we could specify that certain scripts can run without async, that would also help too.

xmedeko commented 2 years ago

Workaround by disabling scrolling mentioned above works for me, but is not convenient.

What about some workarounds:

Specify expected height of the image in the mermaid comment, e.g. %% vscode: min-height:30em, the extension would pick it and use as style as mentioned in the previous post https://github.com/mjbvz/vscode-markdown-mermaid/issues/71#issuecomment-880281337
Make some markdown / mermaid code cache and update the final image when the mermaid code of the image is changed only.
User settings: to auto refresh images less frequently, e.g. every 2 sec only.
User settings: to disable auto refresh (per user setting) completely, do it on a certain VS Code command (F1) only.
User settings: refresh the final image on the click on the image only (do not now if it's possible).

mjbvz commented 1 year ago

If you are still seeing this issue, can you please share an example markdown file and steps to reproduce the problem so I can take a look

xmedeko commented 1 year ago

@mjbvz 👍 The problem does not appear for me now, VS Code 1.73.1, Markdown Preview Mermaid Support 1.16.0.

mjbvz commented 1 year ago

Ok tentatively closing but please share the markdown document text if this still isn't working in some cases

pearj commented 1 year ago

I couldn't reproduce it either anymore hooray. I guess vscode must have changed the webview behaviour.

JohnLudlow commented 1 year ago

Hi,

I can reproduce the issue with this markdown (also see the attached video):

# This is a test of mermaid and markdown

These are some ideas

1. Drink coffee
2. ???
3. CONQUER THE WORLD!!!

## A mermaid diagram:

```mermaid
sequenceDiagram
    participant yaml as CI YAML
    participant pwsh as PowerShell Scripts
    participant proj as .NET Project

    activate yaml
        yaml  -->>  yaml  : GIT FETCH
        yaml  -->>  yaml  : VERSION FROM PIPELINE COUNTER

        Note over yaml, pwsh: INIT
        yaml  ->>+  pwsh  : SET ENVIRONMENT VARIABLES
        pwsh  -->>- yaml  : 

        rect rgb(254, 255, 173)
        Note over yaml, proj: BUILD
        yaml  ->>+  proj  : DOTNET RESTORE
        proj  -->>- yaml  : 

        yaml  ->>+  proj  : DOTNET BUILD
        proj  -->>- yaml  : 

        yaml  ->>+  proj  : DOTNET TEST
        proj  -->>- yaml  : 
        end

        rect rgb(254, 255, 173)
        Note over yaml, proj: PACK / PUBLISH
        yaml  ->>+  proj  : DOTNET PACK
        proj  -->>- yaml  : 

        yaml  ->>+  proj  : DOTNET PUBLISH
        proj  -->>- yaml  : 

        yaml  -->>  yaml  : PUBLISH ARTIFACTS
        end
    deactivate yaml
```

A chart

```mermaid
sequenceDiagram
    participant yaml as CI YAML
    participant pwsh as PowerShell Scripts

    activate yaml
        yaml  -->>  yaml  : GIT FETCH
        yaml  -->>  yaml  : RESOURCE FETCH
        yaml  -->>  yaml  : ARTIFACT FETCH

        yaml  ->>   pwsh  : SET ENVIRONMENT VARIABLES
        pwsh  -->>  yaml  : 
    deactivate yaml
```

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac lorem non turpis interdum aliquam. Sed 
tempor aliquet dui, at luctus turpis rutrum in. Nullam at nibh placerat, varius mi ac, varius sapien. In 
nec facilisis dui. Vestibulum dignissim lacus in massa tristique, vel mattis nisi aliquam. Nunc vel semper 
sem. Suspendisse lobortis consectetur eleifend. Phasellus ornare augue odio, sed iaculis justo luctus 
quis. Phasellus ligula velit, vestibulum id nisl in, imperdiet faucibus dui. Donec ligula magna, volutpat 
non urna in, pulvinar rhoncus nibh. Sed semper nulla at ex aliquet malesuada. Cras ornare nunc ut 
condimentum facilisis. Nam dignissim metus diam, eu bibendum eros porttitor sit amet. Fusce vehicula 
dictum nisl, ac euismod orci hendrerit in. Etiam fermentum a nibh in maximus. Duis tristique a leo quis 
convallis.

Aliquam erat volutpat. Mauris magna urna, convallis non orci sed, mattis varius lorem. Nulla malesuada 
enim mi, vitae vehicula leo fermentum non. Ut ac volutpat dui. Phasellus consectetur a felis sed lobortis. 
Integer turpis urna, molestie fermentum sollicitudin a, elementum vitae augue. Donec molestie quam vitae 
augue pretium euismod. Vivamus sapien nisi, volutpat fermentum leo vel, tincidunt aliquet diam. Nunc 
egestas nibh enim. Sed sit amet tempor orci, et consequat metus.

I have 1.19.0 of the extension. This is my VS Code About info:

Version: 1.81.1 (system setup)
Commit: 6c3e3dba23e8fadc360aed75ce363ba185c49794
Date: 2023-08-09T22:22:42.175Z
Electron: 22.3.18
ElectronBuildId: 22689846
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Windows_NT x64 10.0.22621

mjbvz / vscode-markdown-mermaid

Autoscrolling #71

Versions