electron-seamless-titlebar-tutorial
electron-seamless-titlebar-tutorial copied to clipboard
binaryfunt
CSS window border workaround - high DPI scaling issues
Related to #11, the CSS border for the frameless Electron window becomes more than 1 physical pixel thick while maintaining a thickness of 1 device independent pixel on high scaling factors.
Could try something like this.
I've just noticed on 125% scaling, when the border is still 1 physical px thick, the bottom & right borders sometimes don't show depending on the size of the window (https://github.com/electron/electron/issues/10862, or see this GIF). This seems to happen most of the time unless the window's width/height are at specific arbitrary values. It seems to be a Chromium bug as opposed to Electron itself, as I can reproduce on Chrome 80.
Ideally frameless windows should support native Windows borders, but the corresponding issue https://github.com/electron/electron/issues/7172 hasn't received much attention. Frustrating!
Yes, I've been frustrated with this problem for a long time, I mentioned it a while ago. It happens on any scaling that isn't a multiple of 100. There isn't really any fix as far as I know though, the window border is kinda hard to get right especially since the native one is transparent. Google Chrome itself uses a custom window but native 1px border, which would be a nice option in electron.
IMHO, the border should be taken out entirely, because it has at least three problems and no other electron/nwjs app with a custom window (Discord, Teams, Slack, VS Code, GitHub Desktop) has as 1px border of any kind. And it still looks great without it!
