html - 由于 translate3d,伪元素的边框宽度不一致——但为什么呢?

标签 html css pseudo-element translate3d

(我试过搜索这个但似乎无法正确描述它——如果这个答案存在,请指出正确的方向!)

我正在研究一些 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 的伪元素居中并移动到标题下方(效果仍然存在),并且我删除了背景图像本身以便更容易看到效果.他们在这里:

作为引用,这里是左边框伪元素的代码:

#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/

相关文章:

javascript - 告诉 TypeScript 文件将包含在脚本标签中?

jquery - 如何使用不推荐使用 $.browser.msie 的 jQuery 1.3 进行浏览器检测?

jquery - 如何删除网页上特定字符之前或之后的文本

html - Css::textarea 上的第一个字母不起作用

html - 带有::之前和::之后的文本未正确居中?

html - 如何使表格的动态行成为标准高度?

html - CSS 旋转对象在动画完成之前不会旋转

html - 为什么 div 内的嵌套跨度不遵循该 div 的行高规则?

css -::before 或::after 插入的图片高度是否可控?

javascript - 单击主页上所有内容 div 的淡入淡出 JavaScript 函数