Chrome小型显示器上的CSS网格幻影线

Question

我有许多相同尺寸的物品的网格。没有定义间隙，但是在项目之间仍然有令人讨厌的鬼线。

这仅在较小的显示器（在Android上且处于“设备模式”下）的Chrome上发生。我无法在Firefox或Safari设备模式下重现此内容。

下面是示例代码：https://codepen.io/anon/pen/yxbLav

HTML

<div class="board x9">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>

  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>

  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

CSS

.board {
  display: grid;
}

.board.x9 {
   grid-template-columns: 40px 40px 40px;
}

.cell {
  background-color: #232323;
  height: 40px;
}

有什么办法可以解决这个问题？