Cmd+Preview bugged with images in callouts

[Anatoly]

Steps to reproduce

1. Create a note with the a callout attached at the top, and an image inside.
2. 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.

Expected result

Image getting displayed. It works in live preview and read view.

Actual result

Environment

At the moment of taking pictures, the debug info is as follows. However see image below, with disabled snippets and plugins, the bug still occurs.

SYSTEM INFO:
	Obsidian version: v1.4.14
	Installer version: v1.4.14
	Operating system: Darwin Kernel Version 22.3.0: Mon Jan 30 20:42:11 PST 2023; root:xnu-8792.81.3~2/RELEASE_X86_64 22.3.0
	Login status: not logged in
	Insider build toggle: off
	Live preview: on
	Legacy editor: off
	Base theme: dark
	Community theme: none
	Snippets enabled: 3
	Restricted mode: off
	Plugins installed: 6
	Plugins enabled: 3
		1: Completr v3.2.0
		2: Dataview v0.5.59
		3: Obsidian Git v2.22.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.
	Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community plugins.

Additional information

This does not occur in the sandbox vault. workspace.json is in gitignore and I’ve deleted it several times in an attempt to fix the issue.

[ariehen]

I can reproduce something similar if I scroll in the Page preview window.

> [!NOTE] Title
> ![[neko.jpg]]


> [!NOTE] Title
> ![[the-ex.jpg]]

page preview scroll

---

SYSTEM INFO:
	Obsidian version: v1.4.14
	Installer version: v1.4.14
	Operating system: Darwin Kernel Version 22.6.0: Fri Sep 15 13:41:28 PDT 2023; root:xnu-8796.141.3.700.8~1/RELEASE_ARM64_T6000 22.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

[WhiteNoise]

This feels like a graphical glitch introduced by the browser renderer.

[Anatoly]

Glad to know I’m not the only who experienced this! In the discord I had trouble finding anyone who had the same bug!

@WhiteNoise is it related to a css class or just renderer? The bug only occurs exclusively on cmd previews for me, but not automatic ones in the document. I may be uninformed enough behind how the browser renderer works

[rphii]

I’ve noticed this happen (in the Sandbox even) if I go fullscreen obsidian → win+right arrow key (so that it’s on my right half of the screen)

Then, if I ctrl+hover (preview) pages with images in callouts they’re rendered cut-off.

ACTUALLY SOME IMPORTANT INFO and how I managed to “”“fix”“” the issue

• I am on a 3240 x 2160 display
• In the windows settings, I’ve set the scaling of things to 200%, otherwise I can’t see anything
• I decided to turn off 200% and go with 100% instead → and I couldn’t reproduce even how I suggested it
• once I went back to 200% the bug occured again

[Anatoly]

@WhiteNoise can you reproduce it with the steps above? Would be great to hear more news on it!

[Anatoly]

@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 fixes the problem?

I have tested this with the normal callouts, too.

[ariehen]

I think that may be it. No snippet:

Using:

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

with snippet

[Anatoly]

Thank you, very much, @ariehen, will this be added as a fix (or well, the darkening blend style remove) in Obsidian, or is it meant to be with external snippets?

[ariehen]

I unchecked the solution for now; it was your CSS suggestion that seems to have fixed it (in this case).

Let’s see what the team have to report or think about it.

[WhiteNoise]

The workaround provided in this thread is valid, however we would like to rework our css code so that it mix-blend-mode is not used. This bug will remain open until it happens.

[WhiteNoise]

will be fixed in 1.5.13