Canvas: cards with list items inside callouts are blurry

Steps to reproduce

  • Create a new canvas
  • Add a card to the canvas
  • Create a callout inside the card
  • Add a list item inside the callout

=> The card is blurry.

Did you follow the troubleshooting guide? [Y]

The issue is reproduced in the sandbox vault.

Expected result

No cards should be blurry.

Actual result

The card containing the list item inside the callout is blurry.

Environment

SYSTEM INFO:
Obsidian version: v1.4.13
Installer version: v1.4.13
Operating system: Windows 10
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: light
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none


Additional information

See screenshot:

3 Likes

I’d like to report the same problem here. Same environment except v1.4.16.
The issue also appears when editing the content of the card: when editing, the blur disappears. If we go from reading mode with the callout closed (no blur) directly to editing mode we see a brief blur before it gets back to normal again. Going from reading mode with callout opened (blurred) to editing mode it gets back to normal.

2 Likes

Same issue here.
I tried changing the theme, zoom, font size, restarting.
But its still blurry in reading mode, no matter what.
It applies to notes as well as cards.

thanks

Reporting same problem here. It seems this issue has not been resolved

I have the same problem. Using default dark theme with version 1.5.12.

I’ve got the same problem, it’s very annoying since i use list items often in callouts.
The canvas is unusable with how blurry the text becomes, you’d have to zoom in all the way to get crisp text.

Might be not related directly to this issue, but I got here looking why my canvas were always blurry.
Maybe this will help others.
Another curious symptom I had: text in canvas would get sharp when I focus on a different window.

Experiment in sandbox had shown that the issue is not universal.
I then narrowed it down to the following part of a custom CSS snippet:

.markdown-embed {
  border-radius: 6px;
}

Fixed by narrowing the query to

:is(.markdown-source-view, .markdown-preview-view) .markdown-embed {
  border-radius: 6px;
}

Lesson

Need to be cautious of the scope of custom CSS.

Exact cause

Not sure. The combination of border radius with something else seems to disable optimized rendering.
Similar issue in Chromium tracker: Border-radius with transform and overflow: hidden causes blurriness [41321934] - Chromium

Side note

The CSS (not custom)

.canvas-node-content {
  backface-visibility: hidden;
}

seems to affect card borders rendering, but that’s not nearly as critical.

will be fixed v1.6.1

This may help you

body {

    --callout-radius: 0px;

}

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