If a sentence of "callout blocks" starts with "-", "1.", "2.", etc., a part of its live preview is not visible

I’m using Obsidian version 1.5.3 without any third party plugins installed and without any theme installed, and I’m having the following problem after just changing the size of the live preview hover window with a custom CSS snippet (no problem when not changing the CSS snippet) :

The custom CSS snippet is as follows:
body{
.popover.hover-popover {
width: 53%;/Hover Window Size/
}
.popover.hover-popover .markdown-embed .markdown-embed-content {
width: 180%;/Hover text width/
}
}
customization.css (191 Bytes)

Then, When the link object of the live preview is “callout blocks”, if there is no " - “, " 1.”, " 2." at the beginning of a sentence of “callout blocks”, part of the content of the live preview is visible. As shown in the figure below:

When the link object of the live preview is “callout blocks”, if there are " - ", " 1. ", " 2. " at the beginning of a sentence of “callout blocks”, part of the content of the live preview will not be visible. As shown in the figure below:

I don’t know what’s wrong. How do I change the custom CSS snippet or is this a bug in Obsidian?

The behavior here looks similar to this issue report:

I see this without any custom CSS using Page Preview:

Obsidian_PqP7QwoGNO


As an aside, and this doesn’t seem to help the issue, but you could try using custom variables in adjusting the popover:

body {
    --popover-height: 700px;
    --popover-width: 700px;
}
1 Like

Thanks for the CSS snippet, it’s much more concise than mine (I don’t know how to code, I guessed the CSS snippet myself by looking at other people’s code before). It looks like that live preview bug has been there for a while, I hope the officials pay attention to it!

1 Like

@ariehen not sure if it helps but by playing with your solution it seems like the “bugged offset” is constant for a created preview. Are there any @media queries that could affect this behaviour?

Courtesy of Anatoly, in this post here:

You could try adding this CSS (in addition to the height/width changes above):

.hover-popover .callout {
    mix-blend-mode: normal;
}

to see if it fixes the issue for you. It does for me.

CleanShot 2024-03-11 at 20.46.46

Thank you very much, this CSS has solved my problem. Finally, the live preview function works properly.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.