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

[asdas]

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?

[ariehen]

The behavior here looks similar to this issue report:

Cmd+Preview bugged with images in callouts

Steps to reproduce Create a note with the a callout attached at the top, and an image inside. In the navigation menu, click cmd to preview a note. Did you follow the troubleshooting guide? Y I tried: Disabling CSS, turning safe mode on, restarting the computer. None of this worked. It’s clearly not a custom css problem. Plugins active at the moment are Completr, Dataview, Obsidian Git I also tried deleting the .obsidian directory, in order to reset the stylesheets. Did not work either. Expec…

I see this without any custom CSS using Page Preview:

---

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;
}

[asdas]

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!

[Anatoly]

@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?

[ariehen]

Courtesy of Anatoly, in this post here:

Cmd+Preview bugged with images in callouts

@ariehen @asdas UPDATE I have a script that fixes the issue! It is some black magic for me, since I’m not a CSS expert, but the value --callout-blend-mode is set to darken, which seems to create the bug. /* * This script resets the blend mode of callouts. * Attempt to fix https://forum.obsidian.md/t/cmd-preview-bugged-with-images-in-callouts */ /* :root { --callout-blend-mode: normal; } */ .callout { mix-blend-mode: normal; } Could someone try this out and tell me if this script f…

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.

[asdas]

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