在div上使用百分比transformY可能会导致相邻div之间出现接缝

Question

我一直在使用 CSS3 转换在我的网站中创建一个弹出窗口，但我注意到该弹出窗口中相邻 div 之间存在接缝。
我做了一个最小的例子来演示。

#wrapper {
  width: 50px;
  transform: translateY(50%);
}

#a,
#b {
  background: red;
}

#a {
  height: 50px;
  width: 100px;
}

#b {
  height: 51px;
  width: 150px;
}

<div id="wrapper">
  <div id="a">
  </div>
  <div id="b">
  </div>
</div>

您可以看到 #a 和 #b 之间有一个接缝。

我深入研究了这个问题，发现在 chrome 中使用具有一定高度的百分比变换Y可能会导致这个问题（我没有在 Firefox 中测试它）。

在我的示例中，如果 #wrapper 的高度是奇数，translateY(50%) 将在子元素中创建接缝。

你可以尝试将 #b 的高度设置为 52px，你会看到接缝消失。
在我的网站中，我通过为该弹出窗口设置固定高度来修复它，但有时你无法控制高度，我想知道这是否是 chrome 中的错误，或者我没有做对。

抱歉我的英语不好。

Answer 1

添加Backface-visibily：hidden; <代码> #wrapper 。那将完成这项工作。

#wrapper {
  width: 50px;
  transform: translateY(50%);
   backface-visibility: hidden; 
}

#a,
#b {
  background: red;
}

#a {
  height: 50px;
  width: 100px;
}

#b {
  height: 51px;
  width: 150px;
}

<div id="wrapper">
  <div id="a">
  </div>
  <div id="b">
  </div>
</div>