O posicionamento de um elemento fixo dentro de outro elemento fixo está se comportando de maneira diferente no Chrome / Safari x Firefox.

Esta resposta explica bem o comportamento esperado para uma div fixa dentro de uma relativa, eMDN é bastante claro nisto:

Posicionamento fixo Não deixe espaço para o elemento. Em vez disso, posicione-o em uma posição especificadaem relação à janela de exibição da tela e não o mova quando estiver rolado. Ao imprimir, posicione-o nessa posição fixa em todas as páginas.

O que eu não entendo é o que o Firefox está fazendo com uma div fixa dentro de uma div fixa. O que eu espero é que o elemento filho se mova junto com o wrapper ao passar o mouse.

.wrapper, .header {
  position:fixed;
  width:320px;
}

.wrapper:hover{
  left:0px;
}
.wrapper{
  width:320px;
  height:100%;
  background:white;
  overflow:scroll;
  left:-200px;
  transition: all ease-out .3s;
}
ul {
  margin-top:120px;
}
 .header {
   background:rgba(255,255,255,0.9);
}

body{
  background:gray;

<div class="wrapper">
  <div class="header">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae vitae a, itaque commodi, odio et. Excepturi, obcaecati? Architecto repellendus omnis mollitia animi rem quasi at, odit aperiam voluptatibus voluptates earum!
  </div>
  <ul>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam maiores, voluptas facere, iste quis iusto reiciendis delectus, quod blanditiis tempora. Earum voluptatum dicta quae, explicabo placeat at rerum assumenda!
    </li>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam maiores, voluptas facere, iste quis iusto reiciendis delectus, quod blanditiis tempora. Earum voluptatum dicta quae, explicabo placeat at rerum assumenda!
    </li>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam maiores, voluptas facere, iste quis iusto reiciendis delectus, quod blanditiis tempora. Earum voluptatum dicta quae, explicabo placeat at rerum assumenda!
    </li>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam maiores, voluptas facere, iste quis iusto reiciendis delectus, quod blanditiis tempora. Earum voluptatum dicta quae, explicabo placeat at rerum assumenda!
    </li>
  </ul>
</div>

Alguma ideia? Também estou procurando uma solução alternativa para ter consistência entre os navegadores.

Edit: mais divertido?

Adicione isso para ainda mais falha no FF:

.header:hover{
  height:200px;
}

Ao passar o mouse, ele dispara uma nova pintura e, em seguida, FF recalcula a posição do elemento.

Testes feitos com o FF 46.0.1, Chrome 54.0.2840.71 e Safari Versão 9.1.1 (11601.6.17).Nota: eu já liessa questão