Rendering issue w/ preview popovers of notes w/ callouts

[gapmiss]

Steps to reproduce

1. Create a new note starting with a callout and some blocks of text
2. Search (⇧⌘F) for note and hover mouse over note title in search results list and activate hover preview.

Expected result

A hover preview w/ a fully rendered callout.

Actual result

Rendering issues with the callout block. (see attached GIF)

Environment

• Operating system:

SYSTEM INFO:
Obsidian version: v1.1.12
Installer version: v1.1.9
Operating system: Darwin Kernel Version 21.6.0: Sat Jun 18 17:07:25 PDT 2022; root:xnu-8020.140.41~1/RELEASE_X86_64 21.6.0
Login status: logged in
Catalyst license: insider
Insider build toggle: on
Live preview: off
Legacy editor: off
Base theme: light
Community theme: none
Snippets enabled: 1
Restricted mode: on

---

Additional information

• The DEBUG info says I have 1 snippet enabled. However, before testing, I disabled all snippets and did a reload of the vault.
• This was also tested in a sandbox vault w/ the same results.
• I tested also with other notes w/ more than one callout and most had rendering issues.
• My first inclination is the suggestion-container mod-search-suggestion element is somehow interfering, maybe z-index.

Thank You

[WhiteNoise]

That is very odd. It may be a graphical glitch. What’s your OS version/macbook version?

[gapmiss]

macOS Monterey
Version 12.5
MacBook Air (13-inch, 2017)

[Jopp]

I go this error as well, this bug has to do with outdated code blocks/callouts of unloaded plugins (one example: unloaded Admonition and unloaded custom snippet generated by Admonition)
Just remove the backticks “```” of your text block and us a regular callout instead, like so:

> [!note]+ Title
> 

[gapmiss]

Thank you … but there were no backticks in the block I tested with. However, I did a bit more testing and it seems it has to do with the length of the line in the callout. I haven’t pinned it down and will not be troubleshooting any further, since the issue has minor significance.

[Jopp]

You could try following:

• remove the callout and see if you get the same (markdown) errors

Markdown will display correctly everything before an error in your note occurs, so check :

• unknown text blocks generated by deactivated plugins,
• pieces of html copied over,
• special characters like “*" which need to be escaped, preceded by "\” if you don’t want to use bullets or italic, bold
• avoid characters like colons “:” in titles

Maybe this info is useful to you

[Pch]

@gapmiss, I’m just here to say that I can repro this bug too, in the sandbox vault (and more generally, in my personal vaults ) on a :

• MacBook Pro (15-inch, Mid 2014)
• macOS Big Sur 11.7.4

Obsidian Debug Info:

SYSTEM INFO:
	Obsidian version: v1.1.14
	Installer version: v1.1.9
	Operating system: Darwin Kernel Version 20.6.0: Fri Dec 16 00:35:00 PST 2022; root:xnu-7195.141.49~1/RELEASE_X86_64 20.6.0
	Login status: logged in
	Catalyst license: supporter
	Insider build toggle: on
	Live preview: on
	Legacy editor: off
	Base theme: dark
	Community theme: none
	Snippets enabled: 0
	Restricted mode: off
	Plugins installed: 0
	Plugins enabled: 0

RECOMMENDATIONS:
	none

Screen recording:

[Pch]

Add-on: I also can repro this rendering issue (in the sandbox vault) when hovering a link in a note referencing to itself ().

Link example: [[Note title#Hn|Note title]]

But:

• 2 notes (at least) need to be opened side by side
• The note opened on the left is the one where we hover the link (the note on the right can be any other notes).
  The note on the left can be in Live Preview or Reading, it doesn’t seem to make a difference

Whether the left pane is expanded or not seems to make some difference (when it is expanded, the rendering issue seems worse)

Here is a screen-recording (from the sandbox vault once again) showing the issue when hovering the note’s title in the file explorer, then the link [[A note#Some text|A note]] right next to it (same rendering issue) but everything is then fine when hovering the same link in the same note on the right (both notes are in Reading) .

[WhiteNoise]

If you disable hardware acceleration (settings>about>advanced) and restart Obsidian, does it still happen?

[Pch]

Yes

From the sandbox vault

[Jopp]

Today i looked again into this bug and after digging a lot of code in my own theme i found out that the popover needs just a few more parameters to display content properly.
(I tested it on a default vault, snippets, plugins, themes disabled)

div.popover.hover-popover {
  transition: ease-out;
  overflow-x: visible;
  overflow-y: visible;
  min-height: none;
}

div.popover.hover-popover .markdown-preview-view {
  padding-left: 0;
  padding-right: 0;
}

div.popover.hover-popover .markdown-embed-content .markdown-preview-section {
  padding: 0rem;
}

.popover.hover-popover .markdown-embed img {
  max-width: 100%;
  max-height: auto;
  margin: 0em;
}

[gapmiss]

@Jopp, thank you for your diligence. I have tested your CSS fixes and I am unable to replicate the original issues with callouts not rendering correctly. The CSS rules appear to solve the problem. I will mark this as a solution.

[WhiteNoise]

The fix for this will be included in the next major version Obsidian 1.2. No ETAs.