具有内部绝对性的外部相对DIV的100％宽度和高度

Question

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

这是屏幕截图。

.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);
}