html - 用内部绝对覆盖外部相对 DIV 的 100% 宽度和高度

Question

我有一个外部相对 div 和两个内部绝对 div。内部 div 应该完全覆盖外部，但是当它们在桌面上这样做时，在平板电脑上在内部 div2 和包围的外部 div 之间有一些空间。这是怎么回事？这是一个错误吗？？

这是 a screenshot .

.problem-description {
  display:block;
  margin:20px;
}

.outer {
  width:300px; 
  height:200px;
  margin:60px auto;
  position:relative;
}
.inner1, .inner2 {
  width:100%;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}
.inner1 {
  background:blue;  
}
.inner2 {
  background:white;
/*   background:url('https://nofri.es/wp-content/uploads/images/port-bubble2.svg'); */
}

<div class="outer">
  <div class="inner1"></div>
  <div class="inner2"><span class="problem-description">the blue edge of .inner1 div bleeds around .inner2 on mobile</span></div>
</div>

Answer 1

我认为您可以尝试将 -webkit-transform: translate3d(0,0,0); 添加到您的外部 div。显然它会强制硬件加速，隐藏不需要的伪影。

.outer {
  width:300px; 
  height:200px;
  margin:60px auto;
  position:relative;
  -webkit-transform: translate3d(0,0,0);
}