Chrome-仅在分隔线的呈现宽度中存在可变性

Question

我正在创建一个多格式可编辑 date/time 小部件，我刚刚注意到一个小部件中的分隔线看起来比其他小部件中的分隔线更粗（红色文本的更粗） :

这是 CSS 的：

.tbw-dse-divider {
  align-self: stretch;
  background-color: #A6A6A6;
  margin: 0 max(1px, 0.0836em);
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  width: max(1px, 0.0836em);
}

如果我通过 left: 0.5px 将分隔线的位置移动半个像素来调整此 CSS，那么一个分隔线会变细，而其他的会变粗：

根据 Web 控制台，此行呈现为 2.5 像素宽。我猜这是某种舍入误差，有时我得到 2 个像素，有时我得到 3 个像素。

Firefox 和Safari 都没有这个问题，分隔线的外观始终是一致的。屏幕截图来自高分辨率屏幕，因此应该可以很容易地清晰地渲染一半 px。

有谁知道解决此 Chrome 宽度舍入问题的方法吗？

Firefox 渲染：

Answer 1

我通过搜索“亚像素渲染”这个话题找到了答案。以下愚蠢的技巧解决了这个问题：

.tbw-dse-divider {
  align-self: stretch;
  background-color: #A6A6A6;
  margin: 0 max(1px, 0.0836em);
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  width: max(1px, 0.0836em);
  transform: rotate(-0.0000000001deg);
}

接近 0 的旋转变换欺骗 Chrome 进行子像素渲染，否则它不会费心去尝试这样做。在这里找到答案：Is there a way I can force chrome to do subpixel rendering for a slow translation?

Chrome-仅在分隔线的呈现宽度中存在可变性

Chrome-only variability in rendered width of a divider line

html

css

google-chrome

sass