(我试过搜索这个，但似乎无法正确描述它——如果这个答案存在，请指出我正确的方向!)
我正在玩一些CSS规则。我想在一个伪元素上创建一个特定的、2px 宽的辅助边框，出现在标题中的导航 anchor 周围，它打开一个模态并模糊一个绝对定位的背景图像 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 转换。我截取了屏幕截图，但我使用 将伪元素居中并移动了左边框: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 的情况下重现原始问题背面可见性:隐藏 到伪元素本身。这可能暗示一般像素舍入问题，特定属性作为触发器只是一种症状。
最佳答案
进一步摆弄后，回答我自己的问题:这不是硬件加速引起的，这是我的修正怀疑。尽管在我的特定情况下使用这些效果展示了问题，但我能够在没有它们的情况下重新创建我的问题版本。
通过从 #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; */
}
呃:我应该预料到结果，因为早些时候我曾尝试使用元素本身(通过将其设置为 1-2px 宽并对其进行着色)而不是左边框，这在当时似乎解决了这个问题。当然，这次我用上面的css做的时候，the base problem reappeared.
虽然我仍然不知道为什么上述属性显示了 的问题。左边框同样，解决这个问题可能过于零星/依赖于情况而无法在这里进行，并且可能仍然与浏览器渲染有关。
无论如何，我的问题是为什么要使用 transform3d 造成这种效果，答案是，至少在这种情况下，它没有——它只是让它更明显。
关于html - 由于 translate3d，伪元素上的边框宽度不一致——但为什么呢？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44425166/