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 转换。我截取了屏幕截图,但我使用 将伪元素居中并移动了左边框: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 的情况下重现原始问题背面可见性:隐藏 到伪元素本身。这可能暗示一般像素舍入问题,特定属性作为触发器只是一种症状。

    最佳答案

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

    通过从 #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/

    相关文章:

    html - margin 和头寸之间的差异

    html - 如何为css网格元素添加边框半径

    css -::first-letter 伪元素在 Firefox 中不起作用

    CSS :after pseudo-element combined with [checked]: different after-elements not working?

    css - CSS 使用文本阴影的效率是否与框阴影一样差?

    css - 在Firefox中,`a:before`的不透明度被`a`覆盖

    javascript - 标签离输入框太远

    html - css min-width 和 min-height 不起作用

    html - 单击<a>时的过渡

    css - 冲突要求 : table columns expand to fill the space available, 但也截断文本