分隔线的渲染宽度中仅 Chrome 的可变性答案

【问题标题】：Chrome-only variability in rendered width of a divider line分隔线的渲染宽度中仅 Chrome 的可变性
【发布时间】：2021-07-15 01:04:05
【问题描述】：

我正在创建一个多格式可编辑日期/时间小部件，我只是注意到一个小部件中的分隔线看起来比其他小部件的同一行更粗（在带有红色文本的那条中更粗）：

下面是 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，那么一个分隔线会变细，而其他的会变粗：

根据网络控制台，这条线以 2.5px 宽呈现。我猜这是某种舍入错误，有时我得到 2 个像素，有时我得到 3 个像素。

Firefox 和 Safari 都没有这个问题，并且分隔线的外观总是一致的。屏幕截图来自高分辨率屏幕，因此应该可以轻松干净地渲染 px 的一半。

有人知道解决这个 Chrome 宽度舍入问题的方法吗？

由 Firefox 呈现：

【问题讨论】：

小部件在 chrome 和其他地方的大小是否相同？如果以其他方式重置，字体大小、字体系列、字母间距是否会在您的任何浏览器中呈现相同或重现相似的视觉效果？
@G-Cyrillus，除了这个宽度舍入问题，其他浏览器上的小部件看起来相同。我将在帖子中添加一个 Firefox 屏幕截图。
您可以选择自己的答案作为解决方案。对遇到类似问题的下一个您很有用。

标签： html css google-chrome sass

【解决方案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?

【讨论】：