iOS Safari：定位的绝对子级随变换而随机消失在定位的固定父级内

Question

我有抽屉式动画移动菜单，带有可滚动导航和固定页脚。 由于根据旧问题不可能在转换后的元素内固定元素，因此我将绝对位置应用于页脚，并将滚动应用于导航容器。 问题是，在IOS 12.1上，页脚随机消失。

HTML

<div class="menu">
  <nav class="nav">...</nav>
  <footer class="footer">Some footer</footer>
</div>

CSS

.menu {
  position: fixed;
  z-index: 1050;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  min-height: 100%;
  transition: transform .3s ease-out;
  transform: translate(-100%, 0);
  -webkit-overflow-scrolling: touch;

  &.menu-open {
    transform: translate(0, 0);
  }
}

nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 100%;
  overflow: auto;
}

footer {
  position: absolute;
  bottom: 0;
  width: 300px;
  height: 65px;
}

UPD
我知道两个可行的解决方法：
 1.将“转换动画”属性更改为左，但性能较低
 2.将导航底部设置为65px，以使其与页脚不重叠，但这不能回答发生这种情况的原因

Fiddle