Text gets blurry when scrolled to some position with dpi scaled

ldjttz · April 20, 2022, 7:06pm

Steps to reproduce

This is using default theme and no other visual adjustments. Screenshot is with Consolas font and Live Preview mode, however this happens in source mode and reading mode as well.

Expected result

RGB subpixel rendered text for increased text clarity.

Actual result

Only grayscale antialiasing (see screenshot) for text. However, text in code blocks will have RGB subpixel antialiasing.

Environment

Operating system: Windows 10

Debug info:
SYSTEM INFO:
Obsidian version: v0.14.5
Installer version: v0.14.5
Operating system: Windows 10 Enterprise 10.0.18363
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 1
Safe mode: off
Plugins installed: 4
Plugins enabled: 4
1: Periodic Notes
2: Hider
3: Minimal Theme Settings
4: Mousewheel Image zoom

Additional information

This is regular text in live preview, with only grayscale antialiasing:

This is text in a code block, with RGB subpixel rendering:

WhiteNoise · April 20, 2022, 7:12pm

does it happen in the sandbox vault (no themes, no css, no plugins)?

I can’t reproduce it.

ldjttz · April 20, 2022, 7:38pm

Odd. I just did a series of tests. It appears this happens if I paste text in from VS code, while including some formatting. At that point, the entire file becomes “corrupted” in some way and all text in that note will lose subpixel rendering.

The reason I’ve been seeing this error so much is that I’ve been switching to Obsidian from Dendron notes in VS Code.

I will mitigate for now by pasting as plain text only. I guess the bug is the fact that subpixel rendering can change based on pasted text.

ldjttz · April 20, 2022, 8:01pm

To clarify, this testing was done in a sandbox vault. I think it could be related to copy-pasting text from another Electron app.

WhiteNoise · April 20, 2022, 8:07pm

works for me

ldjttz · April 21, 2022, 8:53pm

I’ve been doing some additional experimentation in a new sandbox vault. In this vault the only two settings changes I’ve made are turning on line numbers and changing the editor font to Consolas.

I was mistaken before regarding pasting from VS Code specifically (or any other application) being the problem. Here I’ve reproduced the issue by simply making the file a certain number of lines (or perhaps it’s characters or some other measure, I’m not sure)

After 18 lines of test text the subpixel rendering works fine.

After I paste the 19th line of text (or type it out, and enter the line break) the entire file falls back to grayscale antialiasing, and text is noticeably less crisp.

Screenshots zoomed in and aligned side-by-side for a better comparison:

I’m running 150% scaling in Windows 10. Nvidia GPU, 4k monitor. This happens with hardware acceleration turned on or off in Obsidian settings.

WhiteNoise · April 21, 2022, 9:21pm

WhiteNoise · April 21, 2022, 9:22pm

This is something specific to your system. I don’t know what it is. I don’t know if obsidian is involved. Maybe it’s a weird chrome/electron bug.

ldjttz · April 21, 2022, 10:12pm

More troubleshooting. I’ve found this occurs whenever the text field is long enough to cause the scrollbar to appear.

WhiteNoise · April 21, 2022, 10:14pm

same thing.

I will leave this BR open in case somebody else has the same issue in the next weeks.

ldjttz · April 21, 2022, 10:24pm

github.com/atom/atom

Text gets blurry when scrolled to some position with dpi scaled

opened 05:11PM - 17 Apr 17 UTC

closed 11:13PM - 17 Aug 17 UTC

noe132

windows editor-rendering

### Prerequisites * [x] Put an X between the brackets on this line if you hav…e done all of the following: * Reproduced the problem in Safe Mode: http://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode * Followed all applicable steps in the debugging guide: http://flight-manual.atom.io/hacking-atom/sections/debugging/ * Checked the FAQs on the message board for common solutions: https://discuss.atom.io/c/faq * Checked that your issue isn't already filed: https://github.com/issues?utf8=✓&q=is%3Aissue+user%3Aatom * Checked that there is not already an Atom package that provides the described functionality: https://atom.io/packages ### Description Text gets blurry when System dpi scaled. ### Steps to Reproduce 1. set your system dpi scale to 150% (not an integer multiple of 100%) 2. open atom 3. new file and enter a lot of text more than a page that u can scroll 4. scroll (i'm using touchpad on laptop) 5. scroll on some position text gets blurry **Expected behavior:** text is sharp **Actual behavior:** text gets blurry sometimes **Reproduces how often:** 100% ### Versions λ atom --version Atom : 1.16.0 Electron: 1.3.13 Chrome : 52.0.2743.82 Node : 6.5.0 λ apm --version apm 1.16.1 npm 3.10.5 node 6.9.5 x64 python 3.6.1 git 2.12.0.windows.1 visual studio gpu :Intel graphics hd 620 on Intel i5-7200U OS: win10 x64 enterprise 14393 ### Additional Information screenshots(left is blurry, right is sharp): ![1](https://cloud.githubusercontent.com/assets/2271900/25095951/8224dbfa-23d0-11e7-8fad-b3e2dc174c09.png) ![2](https://cloud.githubusercontent.com/assets/2271900/25095952/822ac560-23d0-11e7-9b6b-326dc1d7532d.png) #### something i discovered: only when i scroll to a specific position the text gets blurry, otherwise text is sharp, the chance is about 50% I open dev tools found that how text is scroll is by css transform translate property, and it is scrolled pixel by pixel, the css pixel was equivalent to 1.5 physical pixel, so when i scroll a pixel, it translate a pixel, a css pixel was between 2 physical pixels, then the text gets blurry like pic above. ![q](https://cloud.githubusercontent.com/assets/2271900/25096424/b5cbe1c2-23d2-11e7-8d1a-1239d00cf04a.png) As soon as i found that i set my system dpi scaling to 200%, 1 css pixel = 2 physical pixel, there is no factional physical pixel value, and the blurry text issue no longer occurred. Similarly, 100% dpi scale or 300% dpi scale won't occur this problem. I guess this was due to hardware acceleration relating issue, so I have tried that opem atom by `atom --disable-gpu`, and the blurry problem wasn't occurred. So `--disable-gpu` was a walk around by now I have tried that apply a style `body{transform:translate3D(0, 1px, 0)}` on my chrome browser, the text on web page gets blurry too. Maybe it's the problem how blink render transformed element.

After some googling I found this Atom (Electron-based IDE) issue on Github and corresponding comment.

Adding --force-device-scale-factor=1 as an Obsidian startup flag as mentioned by the commenter works around the issue and maintains subpixel rendering in the preview once it reaches scrolling length.

Obsidian launches at 66% of the size (ignoring my system-wide 150% scaling) but I can use Obsidian’s zoom to get things back to the size they were before.

WhiteNoise · April 21, 2022, 10:33pm

Ok so this is an electron problem. I haven’t seen an upstream issue for this.

WhiteNoise · April 21, 2022, 11:25pm

Thanks for diggin this up. We’ll see if we can do a workaround similar to atom.

Dokkebi · August 29, 2022, 4:56am

Bump. Leaving this comment just for the record.
I had the same dpi issue. For me, not only the text but all of the UI shrinked.
Even reinstalled obsidian but the problem persisted.
Setting flag --force-device-scale-factor=1 did solve it.
But would love to see it being fixed in the future.