-
Notifications
You must be signed in to change notification settings - Fork 17.3k
Text gets blurry when scrolled to some position with dpi scaled #14237
Description
Prerequisites
- Put an X between the brackets on this line if you have 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
- set your system dpi scale to 150% (not an integer multiple of 100%)
- open atom
- new file and enter a lot of text more than a page that u can scroll
- scroll (i'm using touchpad on laptop)
- 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):


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.
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.
