由于 translate3d，伪元素上的边框宽度不一致——但为什么呢？答案

【问题标题】：Inconsistent border widths on pseudo-elements because of translate3d -- but why?由于 translate3d，伪元素上的边框宽度不一致——但为什么呢？
【发布时间】：2017-06-08 01:17:54
【问题描述】：

（我已尝试搜索此内容，但似乎无法正确描述它 - 如果此答案存在，请指出正确的方向！）

我在玩一些 CSS 规则。我想在一个伪元素上创建一个特定的 2px 宽的次要边框出现在标题中的导航锚点周围，它会打开一个模态并模糊一个绝对定位的背景图像 div #bg，它是这样的：

<body>
  <div id="#bg"></div>
  <header id="global-header">
    <nav>...</nav>
  </header>
</body>

由于我想转换模糊效果，我将 translate3d(0,0,0) 添加到 #bg，它通过激发 GPU 来对 CSS 进行硬件加速处理来平滑 fps。有效！ ...直到我注意到链接的垂直（左和右）边界在导航中的宽度不一致。它们每个都设置为 2px，但其他每个看起来都是 1.5(??)px 宽。我花了一分钟来缩小原因，这最终是因为 translate3d 转换。我截取了屏幕截图，但我将伪元素与 border-left: 2px 在标题下方居中并移动（效果仍然存在），并且我删除了背景图像本身，这样效果会更容易看到.他们在这里：

作为参考，这里是左边框伪元素的代码：

#global-header nav ul li a:before {
 content: '';
 position: absolute;
 display: block;
 top: 100%;
 left: 50%;
 height: 100%;
 width: 0; 
 border-left: 2px solid gray;
 background-color: transparent;
}

我知道 translate3d 在我的搜索中创建并解决了许多可能的问题——但为什么会发生这种？它与“亚像素计算”有什么关系？为什么这些计算会在硬件加速的情况下在整个页面中呈现不一致，我认为这很难搞砸？

编辑：因此，即使没有 translate3d，当触发模糊过渡（在屏幕截图中的代码中看到）时，问题线也会闪烁到更小的宽度，如果添加 ，我可以在没有 translate3d 的情况下重现原始问题背面可见性：对伪元素本身隐藏。这可能暗示一般的像素舍入问题，特定属性作为触发器只是一种症状。

【问题讨论】：

我最近遇到了像素舍入问题。如果可用像素数量不允许您的元素在空间中平均分配，则有些元素会出现奇怪的舍入，尤其是在您使用变换时。
@damanptyltd 根据您的评论，我做了更多的修改并编辑了我的帖子。
我很高兴能提供一些帮助，但不幸的是它没有为您提供解决方案。遗憾的是，我没有时间演示和解决这个问题，但是对于我的项目，我通过用足够的像素填充外部元素来解决它，使元素的数量完全除以可用的像素数量。我在 on resize 事件中有这个，所以它在任何浏览器大小下总是正确的。

标签： html css pseudo-element translate3d

【解决方案1】：

经过进一步的摆弄，回答我自己的问题：这不是由硬件加速引起的，这是我的修正怀疑。虽然这些效果的使用在我的特定情况下展示了问题，但我能够在没有它们的情况下重新创建我的问题的一个版本。

通过从#bg 元素中移除transform3d：

 #bg {
  .
  .
  .
   /* transform: translate3d(0,0,0); */
 }

而且，在没有 backface-visibility 属性的情况下，我为伪元素添加了一些宽度，以便查看这些边框通常的样子：

#global-header nav ul li a:before {
 content: '';
 position: absolute;
 display: block;
 /* top: 100%; */
 /* left: 50%; */
 height: 72px;
 width: 1px;
 border: 2px solid black;
 /* backface-visibility: hidden; */
 /* border-left: 2px solid black; */
 background-color: transparent;
 /* transition: height .2s ease; */
}

Duh：我应该预料到结果，因为之前我曾尝试使用元素本身（通过将其设置为 1-2px 宽并对其进行着色）而不是左边框，它位于时间似乎解决了这个问题。 当然，当我这次用上面的css做的时候，the base problem reappeared.

虽然我仍然不知道为什么上述属性也显示了 border-left 的问题，但解决这个问题可能过于零星/取决于情况，因此可能还有更多与浏览器渲染有关。

无论如何，我的问题是为什么 transform3d 导致这种效果，而答案是，至少在这种情况下，它没有——它只是让它变得更加明显。

【讨论】：