Mermaid-Chart/vscode-mermaid-preview

Flickering and scroll bar stepping

Closed this issue · 6 comments

Expected behaviour

No flickering, and no scroll position change.

Reproduce

To reproduce (doesn't matter what diagram) I just open any markdown in preview mode and type a space anywhere, every other space or so the result is somewhat different and the scroll position will move up 1 line.

Actual behaviour

The diagram is rendered with different colors depending on whether the file is fully saved to disk or not when looking at the markdown preview. It's also switches between different colors as I'm typing. The scroll position moves up 1 line when this happens.

I'm using the Monokai Pro Dark Theme, might be an issue here. I also have a custom editor style on top of this.

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": ["comment"],
        "settings": {
          "fontStyle": ""
        }
      }
    ]
  }
}

Edit:

This is a minor inconvenience, all in all, I really like the extension.

Can you make a screen capture and share it here? Thanks!

@vstirbu all I'm doing is pressing the spacebar, nothing else.

The problem is visible when you preview the markdown document using the viscose builtin previewer.

This plugin enables rendering of the mermaid diagrams embedded in markdown, but the actual rendering is performed by the builtin previewer on which I do not have control.

If you would like to edit the mermaid diagrams, the better workflow is to use the Preview Mermaid Document from the Command Palette.

BTW, do you have this extension installed: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid?

@vstirbu I do not have the bierner.markdown-mermaid installed. I'll experiment with the other preview mode.

Any updates?