Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

> which means you have subtle display artifacts.

No. 150÷ just means 96dpi * 1.5



At 150% scaling, one logical pixel maps to 1.5 physical pixels. When a 1px grid line is drawn, the renderer cannot light exactly 1.5 pixels, so it distributes the color across adjacent pixels using anti-aliasing. Depending on where the line falls relative to device-pixel boundaries, one pixel may be fully colored and the next partially colored, or vice versa. This shifts the perceived center of the line slightly. In a repeating grid, these fractional shifts accumulate, making the gaps between lines appear uneven or "vibrating."

Chromium often avoids this by rendering 1px borders as hairlines that snap to a single device pixel, even when a CSS pixel corresponds to 1.5 device pixels at 150% scaling. This keeps lines crisp, but it also means the border remains about one device pixel thick, making it appear slightly thinner relative to the surrounding content.

For some people such artifacts are not noticeable for others they are.


I'm one of those people who are super sensitive to the issues you describe, and let me tell you this: Scaling value (like 150%) is just an integer number.

For the most part, non-ancient renderers (3D but also to a large degree 2D renderers), do not care about physical pixels, and when they do, they care the same amount no matter what the DPI is.

Raster data has a fixed number of pixels, but is generally not meant to be displayed at a specific DPI. There are some rare applications where that might be true, and those are designed to work with a specific display of a given size and number of pixels.

It's especially older applications (like from the 90s and 00s) that work in units of physical pixels, where lines are drawn at "1 pixel width" or something like that. That was ok in an age where targetted displays were all in the range of 70-100 DPI. But that's not true anymore, today the range is more like 100 to 250 or 300 DPI.

One way to "fix" these older applications to work with higher DPIs, is to just scale them up by 2 -- each pixel written by the app results in 2x2 pixels set on the HiDpi screen. Of course, a "200%" display i.e. a display with 192 DPI should be a good display to do exactly that, but you can just as well use a 160 DPI or a 220 DPI screen and do the same thing.

It's true that a modern OS run with a "scaling" setting of 150% generally scales up older applications using some heuristics. Important thing to notice here is that the old application never considered the DPI value itself. It's up to the OS (or a renderer) how it's doing scaling. It could do the 2x2 thing, or it could do the 1.5x thing but increase font sizes internally, to get sharp pixel-blitted fonts when it has control over typesetting. And yeah, some things can come out blurry if the app sends final raster data to the OS, and the OS just does the 1.5x blur thing. But remember, this is an unhappy situation just for old applications, and only where the OS receives raster data from the App, instead of drawing commands. Everything else is up to the OS (old apps) or the app itself (newer, DPI-aware apps).

For newer applications, e.g. on Windows, the scaling value influences nothing but the DPI value (e.g. 150% or 144 DPI) reported to the application, everything else is up to the app.


Sorry none of that makes any sense to me. Go to BestBuy where they have Surface laptops on display. Open the browser and go to a website where a grid with 1px horizontal lines are displayed. I immediately notice that the lines are disproportionately thin. You may not notice it and that's fine.


I've started out with a longer reply, but let's try and condense it a little: I concede you can still find this issue, especially on less than 4k displays, but it's becoming less and less of an issue, because of improving software. Where you see the issue, it's simply a software problem -- CSS or Chrome or the website/app should be fixed.

I don't see much of this issue anymore, on my 27" 4K screen, set to 175% scaling. It's logical that if you want to do arbitrary scaling or zooming, and want to keep all distance ratios perfectly intact, you will experience some ugliness from antialiasing (less and less noticeable as you go to ~4K and beyond). That will be so regardless of scaling, even when it's set to 100%.

So if it ought to look good, software simply needs to be written more flexibly! 1px in CSS doesn't mean 1 physical pixel but it is a (quite arbitrary) physical distance, defined as 1/96th of an inch. It's all up to the app and the software stack deciding line widths and how they will actually come out on a screen in terms of pixels lit. They should _respect_ the scaling setting (like 150%) but they also are in full control, in principle, to make it look good.

<hr> lines come out are perfectly fine on my screen (175% 4K) with Firefox and Chrome.

1.5px width lines will come out quite bad with 100% scaling, but will look perfect with 150% scaling obviously.

Notice that vector fonts generally look better if you have a reasonably high-dpi display. But on average, it doesn't matter if you test font sizes of 20pt or 21pt or 17pt or whatever. Why is that? Because font rasterizers already snap to pixels. They properly quantice geometric objects. They don't make arbitrary stubborn choices like "it must be exactly 1/96th of a virtual inch wide" but they are a little flexible to fight antialiasing.

And the more higher DPI monitors there are, the less software will be making stubborn choices.





Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: