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