Steps to reproduce
-
Create a canvas and a card with a code block inside.
-
The code block should contain a long line that breaks to another, for scrolling.
-
Add this CSS snippet for horizontal scrolling in code blocks:
/* horizontal scroll in codeblocks */
.markdown-rendered pre,
.markdown-rendered code {
white-space: pre !important;
word-wrap: normal !important;
word-break: normal !important;
overflow-x: auto !important;
}
- After this code block should contain horizontal scrolling, and all content inside the card will be blurred.
- This snippet removes blur from card except for a code block, and reduces blur in the codeblock.
/* remove blur */
.canvas-node-content .markdown-rendered pre,
.canvas-node-content .markdown-rendered code {
filter: opacity(0.999);
perspective: 1000px;
image-rendering: -webkit-optimize-contrast;
}
Did you follow the troubleshooting guide? [Y]
Expected result
The card and codeblock shouldn’t be blurry.
Actual result
The content of card is blurred if it contains a codeblock with horizontal scroll.
Environment
SYSTEM INFO:
Obsidian version: 1.12.7
Installer version: 1.5.12
Operating system: Windows 10 Pro 10.0.19045
Login status: not logged in
Language: en
Insider build toggle: off
Live preview: on
Base theme: dark
Community theme: Minimal 7.5.4
Snippets enabled: 4
Restricted mode: off
Plugins installed: 25
Plugins enabled: 17
1: Style Settings v1.0.8
2: Shortcuts extender v2.2.0
3: Callout Integrator v1.1.4
4: Code block from selection v1.0.7
5: Customizable Menu v2.2.0
6: Advanced Canvas v3.5.0
7: Simple CanvaSearch v1.0.0
8: Sheets Extended v1.2.10
9: Emoji Toolbar v0.4.1
10: Emoji Shortcodes v2.2.0
11: Avatar v1.1.0
12: Tabs v1.1.8
13: Global Search and Replace v0.5.0
14: Embedded Code Title v0.5.5
15: Contextual Typography v2.2.5
16: Enhanced Copy v1.0.2
17: Minimal Theme Settings v7.5.0
Additional information
Comparison with first snippet (card with scroll is completely blurry):
Comparison with second snippet, fixed blur on card but codeblock still blurred (but less):
Also if you zoom close enough, the card with scroll becomes clear.
The issue is also appears in the deafult theme.