如何设计具有1px透明间隙的响应式棋盘？

Question

我已经建立了这个：

.board {
  .row {
    display: flex;
    flex-direction: row;
    align-content: stretch;
    flex: 1 1 0;

    .cell {
     flex: 1 1 0;
     background: padding-box linear-gradient(280deg, red 0%, dodgerblue 0%, blue 100%);
     border-top: 1px solid transparent;
     border-left: 1px solid transparent;

     &:hover {
       background: padding-box red;
     }

     &::after {
       display: block;
       content: "";
       padding-top: 100%;
     }

     &:first-child {
       border-left: none;
     }
    }

    &:first-child .cell {
       border-top: none;
    }
  }
}

https://jsfiddle.net/b58tfqzw/2/

它在Firefox中工作正常，但在Chrome和Edge中显示2像素的间隙，而不是1像素的间隙，看起来很糟糕。

为什么？以及我该如何解决？