有位置的子div：relative和top：xx％（android Chrome bug？）

Question

查看这个小提琴：https://jsfiddle.net/p2hpab8q/

在桌面Chrome中，红色矩形（相对定位的子项）在蓝色父项（绝对定位的父项）中垂直居中。这就是我所期望的。

但是，在Android中，红色矩形与顶部对齐（顶部：忽略50％）。

为何与众不同？谁是对的？

.parent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: blue;
}

.child {
  height: 100px;
  position: relative;
  top: 50%;
  margin-top: -50px;
  background-color: red;
}

<div class="parent">
  <div class="child"></div>
</div>