vue. js Переход создает вертикальную полосу прокрутки всего за секунду

Question

Я использую Vue.js и transitions.

Это мой компонент.

 <main id="main-content" class="t-center" role="main">
            <transition :name="!phone ? 'slide-right' : 'slide-left'" mode="out-in">
                <keep-alive>
                    <component :is="stepComponent"  />
                </keep-alive>
            </transition>
        </main>

Это мой .scss

.fade-enter-active,
.fade-leave-active {
    transition: opacity .3s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.slide-left-enter-active,
.slide-right-enter-active,
.slide-up-enter-active,
.slide-left-leave-active,
.slide-right-leave-active,
.slide-up-leave-active  {
    transition: transform .2s, opacity .2s;
}

.slide-left-enter,
.slide-right-enter,
.slide-up-enter,
.slide-left-leave-to,
.slide-right-leave-to,
.slide-up-leave-to {
    opacity: 0;
}

.slide-left-enter {
    transform: translateX(100vw);
}

.slide-left-leave-to {
    transform: translateX(-100vw);
}

.slide-right-enter {
    transform: translateX(-100vw);
}

.slide-right-leave-to {
    transform: translateX(100vw);
}

.slide-up-enter {
    transform: translateY(10px);
}

.slide-up-leave-to {
    transform: translateY(-10px);
}

Теперь, что происходит, когда меняется stepComponent, появляется другой компонент на место, и старый исчезает справа налево, а новый компонент приходит справа налево. но проблема в том, что всего за секунду или миллисекунды появляется вертикальная полоса прокрутки, а когда новый компонент находится в конечном месте, эта вертикальная полоса прокрутки удаляется.

вертикальная полоса прокрутки появляется, только если я проверяю ее на chrome (адаптивный режим). Если я тестирую его на том же размере экрана, что и отзывчивый, но не активирую адаптивный режим, то вертикальная полоса прокрутки не появляется, и все хорошо.

Почему появляется вертикальная полоса прокрутки? overflow:hidden не помогло.