Исправлен прыжок элементов на экране при использовании переходов в vuejs

Question

При использовании переходов между маршрутами в vue кажется, что фиксированные или абсолютные элементы перемещаются на свои позиции только после того, как переход завершен, что приводит к прыжку после анимации.Это возможно ошибка?

Вот пример кода: https://codepen.io/anon/pen/ebyOYx

HTML:

<div id="app"></div>

<template id="root-template">
  <div class="routes">
      <nav>
        <router-link to="/" exact>Home</router-link>
        <router-link to="/contact">Contact</router-link>
      </nav>
      <transition name="slide-left" mode="out-in">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
</template>

<template id="home-template">
  <div class="page">
      <h1>Home Page</h1>
      Go to the Contact page and notice the fixed toolbar jumping after transition
  </div>
</template>

<template id="contact-template">
  <div class="page">
      <h1>Contact Page</h1>
    <div class="toolbar">
      Toolbar
    </div>
  </div>
</template>

<template id="404-template">
  <div class="page">
      <h1>404 Not Found</h1>
  </div>
</template>

JAVASCRIPT:

const HomePage = {
  name: 'HomePage',
  template: '#home-template'
}

const ContactPage = {
  name: 'ContactPage',
  template: '#contact-template'
}

const NotFoundPage = {
  name: 'NotFoundPage',
  template: '#404-template'
}

const routes = [
  { path: '/', component: HomePage },
  { path: '/contact', component: ContactPage },
  { path: '*', component: NotFoundPage },
]

const router = new VueRouter({
  base: '/rugor/debug/VKgoRK/', // codepen specific base
  routes
})

new Vue({
  router,
  template: '#root-template'
}).$mount('#app')