为什么这个背景图片不会在Firefox中填充其元素？

Question

请考虑以下代码段：

＆＃13;

＆＃13;

.container {
  background-color: #eee;
  left: 50%;
  min-width: 20%;
  padding: 16px;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
}

.box {
  background-image: url(http://placehold.it/12x12/ff9999);
  background-repeat: repeat-x;
  border: 1px solid #f00;
  height: 12px;
}

＆＃13;

<div class="container">
  <h4>Test</h4>
  <div class="box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望背景图片完全填满.box，这正是Chrome和IE11中发生的情况。但是，Firefox并没有完全填满.box，只剩下一个1像素的白色显示：

导致此问题的原因以及如何解决？