(我试过搜索这个但似乎无法正确描述它——如果这个答案存在,请指出正确的方向!)
我正在研究一些 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 转换。我截取了屏幕截图,但我将带有 border-left: 2px 的伪元素居中并移动到标题下方(效果仍然存在),并且我删除了背景图像本身以便更容易看到效果.他们在这里:
- > Inconsistent 2px calculation (with translate3d(0,0,0) on #bg)
- > Consistent widths (without translate3d transform on #bg)
作为引用,这里是左边框伪元素的代码:
#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 的情况下重现原始问题backface-visibility:隐藏到伪元素本身。这可能暗示一般的像素舍入问题,特定属性作为触发器只是一个症状。
最佳答案
经过进一步的摆弄,回答了我自己的问题:这不是硬件加速造成的,这是我修改后的怀疑。虽然这些效果的使用在我的特定案例中展示了问题,但我能够在没有它们的情况下重新创建我的问题版本。
通过从 #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-2 像素宽并为其着色)而不是 border-left,它在时间似乎解决了这个问题。 当然当我这次使用上面的 css 时,the base problem reappeared.
虽然我仍然不知道为什么上述属性也显示了 border-left 的问题,但解决这个问题可能过于零星/取决于情况,无法在此处填写,并且可能还有更多与浏览器渲染有关。
无论如何,我的问题是为什么 transform3d 造成这种效果,答案是,至少在这种情况下,它没有——它只是让它更明显。
关于html - 由于 translate3d,伪元素的边框宽度不一致——但为什么呢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44425166/