【Vue-router踩坑】点击图片修改路由跳转到的新页面无法上下滚动问题

实在是一个很奇妙的bug……就叫它229奇妙bug吧

环境：vue 2.x + vue-router 3.x + elementui

问题描述

贴一下代码大致结构（属性什么的都没写全）

<template>
	<div class="main">
		<img @click="detail">
	</div>
</template>

export default {
	methods: {
		detail() {
			this.$router.push("ranking");
		}
	}
}

非常普通的一段代码，问题出在新的ranking页内容比较多，需要向下滚动，而点击图片跳转时可以正常跳转到页面（url正常变化），但是它只能显示撑满屏幕的那一块页面，也就是说只显示了ranking页的一部分，右侧没有滚动条，也不能正常滚动，后退返回原页面也无法正常滚动了。并且只有点击图片时才会出现这个问题，用我其他的无序列表项点击执行同样的方法就没有问题。
在谷歌上找了很久，好像大家都没有遇到过这样的问题，本来都打算给vue-router提issue了，后来找到了一个大佬请教，才算是解决了这个问题

问题解决

问题在于最外层的父容器main，它的position被设为了relative，而去掉这一行之后，也就是position变为默认的static，上述问题就没有了。

虽然写了这篇博客提供了解决方法，但背后的原理现在还不是很清楚，事实上原本main的relative属性也并没有起到作用，不知道为什么会导致路由切换时出现这样奇怪的问题。