Cursor jump based on CSS snippet to add spacing to paragraphs, bullets and lines

Custom CSS & Theme Design
1

Steps to reproduce

  1. Enable this CSS snippet (for adding Notion-like spacing to lines)
.markdown-source-view:is(.cm-line:not (.HyperMD-list-line):
not (.HyperMD-codeblock):not(•HyperMD-callout)) {
padding-bottom: 0.25em;
padding-top: 0.25em;
}

.cm-sizer .cm-contentContainer .cm-line {
margin-bottom: 0.25em !important;
padding-top: 0.25em;
}

.cm-contentContainer .cm-content .HyperMD-header.HyperMD-header-3 {
  margin-top: 1em !important;
  font-size: 1.25em;
}

.cm-contentContainer .cm-content .HyperMD-header.HyperMD-header-2 {
  margin-top: 1.25em !important;
  font-size: 1.5em;
}

.cm-contentContainer .cm-content .HyperMD-header.HyperMD-header-1 {
  margin-top: 1.5em !important;
  font-size: 1.75em;
}

/*plus a comment that was just referencing notion's heading sizes*/
  1. Add enough text and headings, usually beyond a page — and the behaviour starts to manifest
  2. Use selection and arrow keys to observe jumps and inconsistencies in selections

Did you follow the troubleshooting guide? [Y/N]

Y

Expected result

Using arrow keys, navigate lines normally
Using selection, move cursor to anywhere in the text and highlight any text

Actual result

Near the bottom lines of the page, line jumps occur — 2-8 at a time. Inability to select certain lines.

Environment

SYSTEM INFO:
Obsidian version: v1.6.3
Installer version: v1.6.3
Operating system: Darwin Kernel Version 23.0.0: Fri Sep 15 14:41:43 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6000 23.0.0
Login status: logged in
Catalyst license: none
Insider build toggle: off
Live preview: on
Base theme: dark
Community theme: none
Snippets enabled: 1
Restricted mode: off
Plugins installed: 12
Plugins enabled: 0

RECOMMENDATIONS:
Custom theme and snippets: for cosmetic issues, please first try updating your theme and disabling your snippets. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community theme and snippets.

Additional information

Hi there!

I read the rules and I know you only consider bugs without CSS snippets, but I wanted to try anyways this bug is snippet related.

Here’s a loom of the behaviour

As stated in the loom, I understand this might not be feasible and I might need to delete this snippet outright, but I thought I’d try anyway.

It’s worth noting this has only been experienced on desktop, never mobile with the same snippet enabled.

Thanks for your time.

2

Moved to themes and css.

1 Like
3

It’s almost certainly adjusting the vertical margins in the editor causing the issue.

That can lead to unexpected results and weird cursor jumping.

1 Like
4

Any workaround here or shall I disable this and finally learn to use standard line spacing like a normal human being?

Side note, it’s crazy how 5 years of using Notion as a note-taking tool will warp your line spacing expectations lol.

5

Give this a try and see if it does what you’re looking for. Keep in mind this is only for the editor, not Reading view.

.markdown-source-view .cm-line:not(.HyperMD-list-line, .HyperMD-codeblock, .HyperMD-callout) {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

.markdown-source-view .HyperMD-header.HyperMD-header-1 {
    padding-top: 1.5em;
    font-size: 1.75em;
}

.markdown-source-view .HyperMD-header.HyperMD-header-2 {
    padding-top: 1.25em;
    font-size: 1.5em;
}

.markdown-source-view .HyperMD-header.HyperMD-header-3 {
    padding-top: 1em;
    font-size: 1.25em;
}
2 Likes
6

Damn, this works exactly as I had hoped. Thank you so much for your help, friend!

8

Just an update for anyone who sees this thread in the future.

As I play around with it more, I’m noticing there are some slight differences in the behaviour of keyboard selection with and without this snippet enabled, but they are very, very minor compared to the original line-skipping and non-selection from before.