Chrome 的亚像素渲染影响固定/绝对定位元素答案

【问题标题】：Chrome's subpixel rendering affecting fixed/absolute positioned elementsChrome 的亚像素渲染影响固定/绝对定位元素
【发布时间】：2022-04-28 05:50:05
【问题描述】：

我有一个基于电子的应用程序，可为采矿工程师提供类似 CAD 的体验。该软件包含一个十字光标：

wide cursor

样式如下：

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

四个十字线段是上一个样式的div的子级，每个十字线都有一个绝对位置和宽度/边框作为样式：

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

根据光标放置的位置，它的粗细会有所波动，即使 CSS 是静态的和绝对的。将下一张图片与上一张进行比较，它更窄，我所做的只是将鼠标移动几个像素：

narrow cursor

根据我的研究，这是亚像素渲染的结果，这很好，但我不认为具有绝对定位和大小样式的 div 会因为它位于屏幕的不同部分而波动。如果在某些显示器上它更厚，我可以理解，但我仍然希望它保持一致。

有人对此有所了解吗？它是基于电子的，因此只需要考虑铬，我宁愿不为整个应用程序设置亚像素渲染来解决这个小问题。

【问题讨论】：

我的猜测是您的显示器已缩放（例如，在 Windows 10 的“显示设置”中）？这意味着您的浏览器必须重新计算每个元素的每个大小和位置，以将其外观缩放 125%（或任何缩放量），这可能导致小数像素 - 这显然不存在，因此浏览器有进行补偿，这可能会导致不一致。
@FluffyKitten 这真是太疯狂了，禁用它可以完全解决问题。鉴于这是在操作系统级别，我认为没有办法解决它，但很高兴知道绝大多数未调整缩放的用户不会看到这个问题。

标签： javascript css google-chrome electron

【解决方案1】：

可能有几个选项可以根据设备缩放来检测和调整光标。可以查看window.devicePixelRatio 以检查当前大小。

Window 属性 devicePixelRatio 返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率。该值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小。简单来说，这告诉浏览器应该使用多少屏幕的实际像素来绘制单个 CSS 像素。

或者您可以考虑为此使用CSS resolution。

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

【讨论】：