Margin on headers breaks keyboard navigation

Steps to reproduce

Create a custom css with these 4 lines

.cm-s-obsidian .HyperMD-header.HyperMD-header-1.cm-line {
  margin-top: 28px !important;
  margin-bottom: 15px !important;
}

Create a new note with a many h1 headers and and many lines of text.

With the keyboard, navigate with the down arrow to the last line.
Or try and click with the mouse on the before the last line of text.

Expected result

The cursor should go where we try to move it to.

Actual result

The cursor jumps to the bottom of the document.

Environment

  • Operating system: Tested on Windows 10 and Windows 11
  • Debug info:
    SYSTEM INFO:
    Obsidian version: v1.0.0
    Installer version: v0.15.9
    Operating system: Windows 10 Enterprise 10.0.22000
    Login status: not logged in
    Insider build toggle: off
    Live preview: on
    Legacy editor: off
    Base theme: dark
    Community theme: none
    Snippets enabled: 2
    Restricted mode: off
    Plugins installed: 2
    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

The more headers modified by margin are added to the text, the more lines will be jumped when trying to navigate to the bottom.
My production snippets contains margin for h1, h2 and h3. When creating long documents with many headers, it can jump 15 lines sometimes.

From my testing, only margin creates this issues. ‘line-height’ or ‘padding’ do not seem to have that issue (but unfortunately are aesthetically displeasing when using background colors).

Thanks in advance for the help,
Aurélien

I don’t take bug involving css modifications. Moved to developers & API.