obsidian sync scrolling glitching

[welpdx]

ITS is my favourite theme. Only recently did I notice that scrolling in editor is kinda glitchy.

Issue description

When scrolling down in the editor, the linked preview keeps glitching and does not scroll in sync.

Additional information:

• When scrolling down in the preview, the editor scrolls down in sync with no issues. The issue is only if I scroll down in the editor
• The glitch vary between other notes but is appears consistent within a note. With noteA for e.g., the visual glitch is easily reproduced no matter how many times you scroll up and down, the exact same glitch appears. However, noteB glitches differently compared to noteA, likely due to different lengths and content.
• Glitch does not happen in default theme, or in other themes such Blue Topaz, or Obsidian Nord. (I suspect it is an css issue)
• For the sake of ease, I've made a plain obs vault with no other settings or plugins except for the ITS theme. Issue persists.
• Other themes that have this issue: Dracula, Obsidianite,
• Themes that is unaffected: Default, Amethyst, Atom, gruvbox, Nord, Blue Topaz, 80s Neon

Steps to reproduce the issue

1. Open the note in two different panels
2. Have one as editor while the other is preview.
3. Link panels
4. Scroll down in the editor

What's the expected result?

Synchronized scroll

What's the actual result?

Preview keeps glitching upwards

Additional details / screenshot

• gif
• bulverism.md
• slacktivism.md

Edit: Fixed gif link

[SlRvb]

Hmm, I've found that this is an issue with the bullet point lines code. It seems to be causing the scrolling sync issue. (Although not sure why it's happening in obsidianite since bullet lines aren't there 🤷‍♀️)

[welpdx]

You're right. Disabling the bullet points seems to help. It must be something to do with the preview.

I'm not a rapper programmer, but if I disable the first three lines there, the scroll sync issue is avoided. (It removes the bullet line in preview though). I disabled:

.cm-hmd-list-indent .cm-tab, ul ul, ol {
position: relative;
}

In obsidianite, there's a small section above the bullets code which, when disabled, "fixes" the issue. Code in question:

/** Syncing the space in font of the list symbol with preview mode **/
.cm-s-obsidian pre.HyperMD-list-line.HyperMD-list-line-2,
.cm-s-obsidian pre.HyperMD-list-line.HyperMD-list-line-3,
.cm-s-obsidian pre.HyperMD-list-line.HyperMD-list-line-4 {
}

I hope that helps you figure out the problem. I also wonder if this is a Obsidian issue, not an issue with the css. Let me know what you think, and let also let me know if I should post this on the Obsidian.md forum.

Thanks for your help man. Oh btw, did I mention that I think your theme is just crisp and al bacio
.

[SlRvb]

Yeah I'd noticed that the issue was mostly occurring with the bullet lists lines in edit mode. I'd say until I can find a solid fix for this issue comment out the line like this:

/*.cm-hmd-list-indent .cm-tab,*/ ul ul, ol {
position: relative;
}

I'll see if I can ask the devs or others who know what's going wrong and fix it.

[welpdx]

Thanks mate! I'll comment it out like that, and I'll eagerly look forward to hearing back from ya. Thanks for the help

[SlRvb]

The issue has now been fixed with the new update I've pushed out for the bullet lines. I don't know if you'll like the look of it, but if the scrolling was a big issue, it's gone now! https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/29

[welpdx]

This is awesome! Thanks for fixing the bug! Did you figure out what caused the issue?

I don't know if you'll like the look of it

I actually love the new look! It is actually what I needed; I can better differentiate between the different levels of bullet points now! 😆

Edit: Grammar