scrollBehavior has no effect when wrapped into transition

[xpepermint]

I realized that scrollBehavior is ignored when <router-view /> is placed within <transition> (router v2.2.0, Chrome browser; it seems that works in Safari).

Example:

<!-- Main App Component -->
<template>
  <div class="app">
    <transition>
      <router-view />
    </transition>
  </div>
</template>

// Router Configuration
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    return !savedPosition ? { x: 0, y: 0 } : savedPosition
  }
})

In the code above I set scrollBehavior to always scroll to the top when a new page is pushed into history and when you go back the scroll is preserved. It works without the <transition> block.

[xpepermint]

I fixed it by adding min-height: 100%; on the .{name}-enter transition class.

<template>
  <transition name="fade" appear>
    <router-view />
  </transition>
</template>

<style>
.fade-enter {
  ...
  min-height: 100%;
}
</style>

[devmattrick]

This solution to work for me when not using any transition modes, but when using mode="out-in", it doesn't seem to work. Any ideas?

Edit:
Nevermind, it works regardless with or without min-height when not using a mode, however when using specifically out-in mode, it does not work at all.

Edit 2: Just realized this is covered in #1263. Sorry about the ping!

[FullStackAlex]

removing mode="out-in" worked for me as well! And didn't get any unexpected behaviour trough this yet. Thank you @devmattrick! Was freaking out not being able to get the source of the bug...