在 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 之间有一个接缝。

我已经深入研究了这个问题，发现使用具有一定高度的 percentag transformY 可能会在 chrome 中导致这个问题（我没有在 firefox 中测试过）。

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

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

抱歉我的英语不好。

Answer 1

将 backface-visibility: 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>

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

Using percentage transformY on div may cause seams between adjacent divs

css

css-transforms