Chrome's subpixel rendering affecting fixed/absolute positioned elements

Question

I have a electron based application that provides a CAD like experience for mining engineers. This software includes a crosshair cursor:

wide cursor

that is styled as so:

    position: fixed;
    overflow: visible;
    width: 0;
    height: 0;

The four crosshair segments are children of the div with the previous style, and each crosshair has an absolute position and width / border as a style:

    position: absolute;
    right: 10px;
    top: 2px;
    width: 80px;
    height: 4px;
    background-color: #ffffff;
    border: 1px solid #000000;

Depending on where the cursor is placed, it fluctuates in thickness, even though the CSS is static and absolute. Compare this next image to the one above, it is more narrow, and all I did was move the mouse a few pixels over:

narrow cursor

From my research this is a consequence of subpixel rendering, which is fine, except I wouldn't expect a div with absolutely positioned and sized styles to fluctuate just because it is positioned in a different part of the screen. I could understand if on some displays it was thicker, but then I'd still expect it to be consistent.

Does anyone have insight into this? It's electron based so only chromium needs to be considered, and I'd rather not set the subpixel rendering off for the whole application just to address this one minor issue.

Answer 1

There may be a couple options to detect and adjust the cursor based on the device scaling. Could look at window.devicePixelRatio to check the current size.

The Window property devicePixelRatio returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. This value could also be interpreted as the ratio of pixel sizes: the size of one CSS pixel to the size of one physical pixel. In simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single CSS pixel.

Or you could look into using CSS resolution for this.

// 76dpi * 1.25 = 95dpi; 96dpi * 1.25 = 120dpi; those are 2 common monitor resolutions
@media (resolution: 120dpi) { 
  .cursor {
    width: 2px; // just an example
  }
}