sonixd
sonixd copied to clipboard
Text looks blurry
Describe the bug Text is rendered with grayscale anti-aliasing rather than sub-pixel. This makes it look blurry rather than crisp.
To Reproduce Open the app and look at the text. Bold text emphasizes the problem. If it's still hard to spot take a screenshot and zoom into it.
Expected behavior Text should not look blurry.
Screenshots
If you really need it I can grab a screenshot of the application, but this example plucked from the Electron FAQ in Additional context illustrates the problem.
![]()
Desktop (please complete the following information):
- OS: Windows 10.0.19044.2251
- Version: 0.5.13
Additional context Changing theme or font does not fix the problem, although it's less visible with "Default Dark" than for example "Spotify-like", maybe due to less contrast.
The Electron FAQ addresses this problem and proposes a fix.
Sub-pixel anti-aliasing needs a non-transparent background of the layer containing the font glyphs. (See https://github.com/electron/electron/issues/6344#issuecomment-420371918 for more info).
To achieve this goal, set the background in the constructor for BrowserWindow:
const { BrowserWindow } = require('electron') const win = new BrowserWindow({ backgroundColor: '#fff' })Notice that just setting the background in the CSS does not have the desired effect.