Skip to content
This repository was archived by the owner on Mar 3, 2023. It is now read-only.
This repository was archived by the owner on Mar 3, 2023. It is now read-only.

Text gets blurry when scrolled to some position with dpi scaled #14237

@noe132

Description

@noe132

Prerequisites

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
2

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

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    editor-renderingwindowsIssues that occur on Windows but not on other platforms.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions