移动设备：在calc（）中用于显示中的列间隙的百分比[％]变为0：网格

Question

我有一个带有网格显示的父div，它可以计算列间距：

.container{
  width: 500px;
  height: 200px;
}
.parent{
  background-color: black;
  width: 100%; 
  height: 100%;
  
  display: grid; 
  grid-template-rows: repeat(2, max-content);
  grid-template-columns: repeat(3, max-content);
  grid-row-gap: 10px;
  column-gap: calc(10%); /*Should be just 10%, but used calc(10%) to show disparity between results*/
}
.child{
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div class="container">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

在台式机和移动设备上都显示相同的内容；两者之间的列间隙均为容器宽度的10％。

如果我将calc（10％+ 1px）用作列间隙，则不使用calc（10％）[再次，使用calc（10％）而不是10％来强调视差]，而是使用MOBILE上的网格（Chrome或Safari）否定10％的条件，列间距仅为1像素宽。在桌面上，calc（10％+ 1px）的行为应为：

.container{
  width: 500px;
  height: 200px;
}
.parent{
  background-color: black;
  width: 100%; 
  height: 100%;
  
  display: grid; 
  grid-template-rows: repeat(2, max-content);
  grid-template-columns: repeat(3, max-content);
  grid-row-gap: 10px;
  column-gap: calc(10% + 1px); 
}
.child{
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div class="container">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

为什么会这样？

=====================

编辑：这也与屏幕分辨率无关，因为Chrome DevTools中的移动模拟器也可以正常运行。