[Vue] vue ios 스크롤 후 뒤로가기 이슈

IOS,,

Safari와 ios 웹뷰에서 컨텐츠를 보다가 뒤로가기하면 간혈적으로 헤더 , 컨텐츠가 빈화면처럼 렌더링이 안되는 경우가 생긴다고 하셨어요.
그래서 BFC가 이슈인가 싶어서 여러글을 다 읽어봤는데도 진전이 없었고
header가 sticky로 되어있길래 transform: translateZ(0) 등 별 짓을 다했는데도 진전이 없었어요

그러던중 규칙을 하나 발견을 했는데
스크롤 후 이동 => 스크롤 후 뒤로가기 (문제 X)
스크롤 후 이동 => 바로 뒤로가기 (문제 O)

그래서 혹시 스크롤이 영향이 있나 싶어 생각 하던중 어플을 사용하다보면 가끔씩 이동하다가
화면이 올라가고 이동이 되는 현상을 발견해서 '아 a링크를 사용해서 위로 올라가나보다~' 하고 생각했더니 그게아니라 누군가 router.beforeEach 안에 window.scrollTo(0,0)을 작성했더라구요,,

혹시나 vue router에는 scrollBehavior라는 메소드가 존재하고 이걸 이용하여 수정하면 되지 않을까 싶어 수정했더니 성공했슴당

/router/index.ts

const router = new VueRouter({
  mode: 'history',
  routes: [...]
  scrollBehavior () {
    return {x : 0, y : 0}
  }
})

scrollBehavior에는 인자를 3개를 더 받을 수 있는데

to:Route , from:Route , savedPosition: void

to와 from은 말 그대로 route가 이동될때 어디서 어디로 이동되는지를 얘기하는거 같고
savedPosition은 해당 포지션 값을 가져오는거처럼 보였습니다.

이전 스크롤값을 유지한채 이동하게 된다면 아래와 같은 코드가 될거같네요

/router/index.ts

const router = new VueRouter({
  mode: 'history',
  routes: [...]
  scrollBehavior (to:Route , from:Route , savedPosition: void) {
	if (savedPosition) {
    	return savedPosition
	} else {
    	return { x: 0, y: 0 }
  	}
  }
})

이슈가 생겼던 이유는 추측일 뿐이지만
beforeEach문이 라우트가 이동되기 바로 전 페이지의 스크롤을 최상단으로 올렸고 바로 뒤로 가기를 했을경우 최상단에서 최상단으로 이동이 되면서 스크롤이 충돌? 나지 않았을까,,
그에비해 scrollBehavior은 이동한 후 스크롤을 작동 시키는거 같았어요