Blurry text when using Shapes on Canvas Cards

Developer-Mike / obsidian-advanced-canvas

⚡ Supercharge your Obsidian.md canvas experience! Create presentations, flowcharts and more!

GNU General Public License v3.0

192 stars 7 forks source link

Blurry text when using Shapes on Canvas Cards #42

Closed Vargock closed 3 months ago

Vargock commented 3 months ago

When applying Shapes to a card, text inside becomes very blurry compared to a regular card. Tested on recent Obsidian version, without any additional modules.

Developer-Mike commented 3 months ago

I can't reproduce this blurriness. Do you have custom CSS snippets enabled? I have only encountered (and fixed) some minor blurring when using an input/output shape.

Vargock commented 3 months ago

I did use custom CSS snippets, but had them disabled before writing a ticket. Sadly, the issue persists even with all snippets and modules disabled.

Developer-Mike commented 3 months ago

Are all shapes blurry?

Vargock commented 3 months ago

I've tested in further, and it seems to happen only with a few particular shapes: Diamond, Parallelogram, Circle, and Document. There seems to be different levels of blur depending on the shape and on how close I zoom into the Canvas, as the closer I zoom in, the better rendering of text gets.

Developer-Mike commented 3 months ago

After some investigation, I came to the conclusion, that this is an unfixable bug of the browser engine running Obsidian. If you apply border-radius: X%;, transform: skewX(Xdeg); or mask-image: X;, the text gets blurry. I hope you can live with this blurriness, because you need to 😵‍💫.