为什么绝对定位的容器会导致其孩子在动画时晃动？

Question

考虑以下演示：https://jsfiddle.net/p1n3j7cv/

a {
  display: block;
  width: 300px;
  height: 300px;
  background: lightgrey;
  position: relative;
}

a .outer {
  display: block;
  width: 100%;
  background: green;
  min-height: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: min-height 3s ease;
  display: flex;
  align-items: center;
}

a .inner {
  display: block;
  width: 100%;
  height: 40px;
  background: orange;
}

a:hover .outer {
  min-height: 100%;
}

<a href="">

  <p> Some regular text <br> which spans <br> multiplle lines <br> so that we have <br> lorem ipsum
  </p>
  <span class="outer">
    <span class="inner">
        hello
    </span>
  </span>
</a>

当您将鼠标悬停在灰色块上时，您会看到，随着外部跨度的扩展（过渡），橙色跨度会抖动。这发生在所有主要浏览器上。原因似乎是涉及到绝对定位，如果后面没有任何内容，我可以使用flex，而不使用绝对定位，这样就解决了问题。但对于我的项目，我需要绝对定位。我尝试使用this solution，但没有成功。

我的猜测是它与在动画min-height 时不使用 gpu 加速有关。每个像素过渡可能都在进行 css 重绘，这会进一步重新计算每个像素移动时的绝对定位元素位置。

问题：为什么会发生震动？

Answer 1

a {
  display: block;
  width: 300px;
  height: 300px;
  background: lightgrey;
  position: relative;
}

a .outer {
  display: block;
  width: 100%;
  background: green;
  min-height: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: min-height 3s ease;
  display: flex;
  align-items: center;
  z-index:1

}
a .inner {
  display: block;
  width: 100%;
  height: 40px;
  background: orange;
  position:absolute;
  left:0;
  top: 50%;
  transform:translateY(-50%);
  z-index:2
}

a:hover .outer {
  min-height: 100%;
}

<a href="">
  <span class="outer"></span>
  <span class="inner">hello</span>
</a>