css - Chrome上的CSS转换显示元素边缘

我正在尝试在包含跨度的div上应用scaleX变换。变换工作得很好，但是当它不统一时，跨度的边缘似乎不接触，导致它们之间出现可见线。

这是一个例子



这是一个fiddle：

  <div class="container">
    <div class="page">
      <div class="line">
        <span class="cell">A</span><span class="cell">B</span><span class="cell">C</span><span class="cell">D</span>
      </div>
    </div>
  </div>

.container {
    background-color: black;
    width: 350px;
}
.page {
    padding: 10px;
    transform: scaleX(1.2);
}
.line {
    padding-left:25px;
}
.cell {
    background-color: white;
    color: black;
    font-size: 100px;
}

将scaleX transform的值更改为1.0，并且边缘消失。更改为1.1，然后更改为1.2，您可以看到该转换似乎效果很好。似乎是Chrome上的萤幕-Firefox和Edge都没有出现问题。我对CSS还是很陌生，因此欢迎任何建议。

最佳答案

将以下内容添加到您的单元格中

-webkit-backface-visibility: hidden;