HTML Blocks rendering incorrectly in live preview

Bug graveyard
1

I frequently make diagrams in my notes using HTML. The rendered HTML in live preview mode has large unexplained gaps like extra margins on all block level elements inside other block level elements.

Steps to reproduce

  1. Open Obsidian in live preview mode.
  2. Write some HTML where there are one or more block level elements inside another element.
  3. Move your cursor out of the HTML so that it gets rendered.

Expected result

Something like this

<div style="border: solid 2px gold">
	<div>Why am I</div>
	<div>so far away from</div>
	<div>the other lines?</div>
</div>

to be rendered like this (the way it is rendered in preview mode):

image
image715×93 4.09 KB

Actual result

That same html is rendered like this in live preview mode:

image
image707×243 4.78 KB

Environment

Debug info:
SYSTEM INFO:
Obsidian version: v0.13.23
Installer version: v0.12.15
Operating system: Windows 10 Home 10.0.19044
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Safe mode: on

Additional information

Non trivial example of hot it affecting me in practice (This is a diagram created with HTML and CSS as it is rendered in preview mode):
image
This is what it looks like in live preview (It is so large I could not take a screenshot of the entire thing):

image
image602×960 13.2 KB

2

This isn’t a bug per se. Ask for help in the css channel on discord.

3

What do you mean its not a bug? What is the cause of the discrepancy between live preview and regular preview?

4

Live preview tries to emulate some aspects of the reader experience but it is not the same, not it aims to be 100% the same, especially when we are talking about html blocks.

5

Anyway, we’ll look into this. maybe we can improve upon it.

<div style="border: solid 2px gold; white-space: normal">
	<div>Why am I</div>
	<div>so far away from</div>
	<div>the other lines?</div>
</div>