背景图片与相邻DIV React之间的Chrome移动间隙

Question

我不确定如何解决此问题，因为它仅发生在移动Chrome浏览器中。

问题：

因此，您可以在图像上看到div周围有一些缝隙，其中背景闪耀着低谷。代码的设置如下：

<div className={classNames(
            scss[timeline-item},
            scss[inProgress]
          )}
          >
            <img
              className={scss.icons}
              src={require(`../../../../assets/images/icons/${icon}.png`)}
              alt={icon}
            />
</div>

Div的班级：

.timeline-item{
  border: white;
  flex: 1;
  background: url(../../../../assets/images/iconBgSmall.png) repeat-y center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #b3b3b3;
>

（请注意，当border设置为0时，我在chrome桌面版中遇到相同的错误，因此将其设置为白色）。

完成某个步骤后，会将另一个类渲染到div的dom中：

.done {
 background-color: black;
}

.inProgress {
 background-color: green;
}

图片作为背景 要查看图像，请单击它以在新窗口中打开（透明/白色）

因此您可以看到，想法是使用背景色显示时间轴的实际状态。 div的背景图片比div本身大得多，因此由于图片大小而不能。

已尝试：

• 内容：“”；
• 边界：0；
• 删除盒子阴影（即使没有阴影也是如此）。
• 负边距
• 大纲：0

删除所有背景色都可以，但是我的功能消失了。

已截断HTML / CSS

这基本上是我所使用的确切代码，然后将其与模型数据进行映射。如您所见，这里什么也没有发生，所以我不知道此错误可能来自哪里。

https://codepen.io/anon/pen/EeOZVN

希望有人可以提供帮助！ 预先感谢