Window controls icons look a bit too thick on high scale/dpi

[Toby56]

This is something you may or may not think is an issue.
On screens above 720p, scaling up can be used by Windows to prevent everything from being super tiny. And while this works mostly well, it makes the window control icons on our titlebar thick, because they are a font. So instead of the icons being made of perfect 1px lines, they look a bit out of place.

175% scaling, electron titlebar at bottom:

100% scaling, electron titlebar at top:

The Microsoft office apps also have thicker icons like this

I don't know why I did this, it's a pretty tiny issue, and I don't think there's and fix for it. Just something I noticed when I switched to a new laptop.

[Toby56]

Hyper uses SVGs for it's titlebar icons, with shape-rendering: crispEdges; to disable the anti-aliasing, so on 1080p 125% scaling they are all one pixel thick except the close button which is rounded to 2px thick.

Whereas real UWP apps's icons are 1px thick, but the close button is still anti-aliased

I tried using -webkit-font-smoothing : none; but it does absolutely nothing

https://github.com/zeit/hyper/blob/canary/lib/components/header.js

[binaryfunt]

I just spent some time looking into SVGs for the button icons, including checking out #13 and codicons which has SVG resources here. However, neither Segoe MDL2 Assets font nor SVG icons consistently reproduce the crisp, 1px thick icons seen in UWP app title bars across high DPI scalings.

The more I think about it, surely they must be using bitmap icons with different sizes for different DPIs, I'll look into tryin to reproduce those tomorrow

[binaryfunt]

Either that or the rasterization method UWP apps use for SVGs is quite different to Chromium

[Toby56]

Yeah I was thinking the same thing, I think they must just have different bitmaps or something. I think the best option is just svg's, this seems to be what most others do. As such, I haven't found another electron app with a better solution. Hyper does this but disables anti aliasing, but I don't think that's a good idea.

Another problem is that on 125% scaling the 1px borders around the window on the right and bottom are hidden on the inside of the window. You can also see this in hyper.

[binaryfunt]

I've recreated the icons as PNGs for 100%, 125%, 150% and 175% scaling using <img> srcset in the branch bitmap-icons. Seems to work very well*, feel free to check out and report any problems with it.

*Only thing is, at 175% scaling, UWP apps seem to keep the window control buttons/icons at the same physical pixels dimensions as 150%, but here the icons stay the same size while the buttons don't. I might look into using media queries to sort that out

[Toby56]

Wow that's really great! I thought something like this would be too hard!

[Toby56]

You can also force things with:

app.commandLine.appendSwitch('high-dpi-support', 1)
app.commandLine.appendSwitch('force-device-scale-factor', 1)

[binaryfunt]

The most difficult bit was figuring out that I just had to omit specifying a width/height for the icons when using srcset in order to make Chromium display them at their natural resolution instead of the device independent pixel width/height (which tended to be 1 physical pixel off leading to anti-aliasing blurriness). The icons weren't too difficult to make in Photoshop considering they're only a few pixels across

[binaryfunt]

On further testing I've noticed the icons are rendering 13 PP across instead of 15 PP on 150% scaling for some reason, thus looking blurry, unless a width/height of 10 DIP is specified in the CSS (but this spoils 125% & 175%). Looking into it...

(PP = physical pixels, DIP = device independent pixels)

[binaryfunt]

I was able to sort that out with

@media (-webkit-device-pixel-ratio: 1.5) {
  width: 10px;
}

I was also able to use a 4k display to implement and test the following icon sizes: 20 PP for 200% & 225%, 24 PP for 250%, and 30 PP for 300% & 350%.