为什么 webkit 的 transform 会让一个元素的边界变得不可预测？

Question

我有两个输入，主要由 Zurb 的 Foundation 框架设计。它们位于 .row.collapse 中，每个位于 .medium-6.columns 中（这些列的宽度为 50%，向左浮动，没有边距）。输入本身在其容器内是 100% 宽的。这一切都非常简单，Inspector 和 jQuery.css 都返回了我期望它们返回的内容。但是有一个边界问题。这是 CSS 的要点：

input {
  border: 1px solid #dddddd;
  &.first {
    border-right-width: 0;
  }
}

这是为了起到折叠中间边框的效果。但出于某种原因，这个border-right-width: 0 正在抛弃 Webkit（Chrome 和 Safari，但不是 Firefox）。检查器显示 1px 边框和正确的边框颜色。白色输入背景与第二个输入正确对齐（即，边框有空间），但没有灰色边框。也许它正在渲染透明？

如果我在视网膜显示器上打开它，它会正常呈现 - 两者都有适当的边框。如果我放大，当它点击“小”媒体查询（移动设备尺寸）时会显示边框。但我无法在 Chrome 中的非视网膜桌面显示器上显示此边框。

这是它在 Chrome 中的外观：

这是它在 Firefox 中的外观：

为了仔细检查，我使用 Web Inspector 为第一个元素应用了一个简单的边框。它显示得很好（看起来像 Firefox 屏幕截图）。添加border-right-width: 0 重新引入了问题。 似乎很清楚这就是问题所在。但是不知道为什么？

似乎border-radius 也可能参与其中？上面的 Firefox 屏幕截图显示了中间的双边框，尽管 Inspector 显示了 0 右边框。如果我在 Firefox 中取消选中 border-radius，它会解决该问题。

这些属性都应该相互独立。为什么它们会相互影响？

编辑

尝试在 codepen 中重新创建。到目前为止不成功，但看起来它与transform 有关 - 这些输入位于使用以下设置的容器中

position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%,-50%));

无论现代浏览器的宽度或高度如何，这都会使元素垂直和水平居中。当我关闭transform 时，边框会正常显示。据我了解，transform 访问 GPU？或者可以吗？这似乎很可能是它被抛弃的原因。如果您查看屏幕截图，我无法解释一些奇怪的边框伪影（例如，左侧元素右侧的部分内部边框）。

编辑 2

它必须是transform - 将border-color 更改为红色可以清楚地表明：边框正在以亚像素级别渲染，然后由于某种原因以一种时髦的方式被切断。您可以在左侧输入周围看到一个模糊的粉红色边框：

Answer 1

这可能有帮助，也可能没有帮助，如果没有小提琴，就很难重新创建；但我想分享一些我最近在使用 webkit 浏览器和 Foundation 时遇到的东西。

默认情况下，Foundation 会在每一行或水平块的最后一列附加一个右浮点数...

foundation.css

  [class*="column"] + [class*="column"]:last-child {
float: right; }

99% 的情况下这都不是问题，除非列之间的边框非常小。 Webkit 浏览器有时会奇怪地计算百分比。

您提到您的列向左浮动，但以防万一这仍然是一个问题；覆盖上面的伪类以浮动最后一个子列可能会有所帮助。