SPA頁面切換動(dòng)畫中Fixed定位問題

背景描述：
單頁面應(yīng)用，為了體驗(yàn)的原因，在路由切換時(shí)，頁面切換之間加上了動(dòng)畫效果。
為了讓動(dòng)畫不卡頓，放棄了js的方案，使用translate3d效果，但是這樣會(huì)導(dǎo)致Page容器中的fixed定位失效。

代碼結(jié)構(gòu)：(Footer可能沒有, Header和Footer都是fixed定位)

Page         Page
  Header       Header
  Content      Content
  Footer       Footer

問題描述：

1. 之前的解決方案是在動(dòng)畫切換之前再給Page加上translate3d屬性，結(jié)束后去除，然后發(fā)現(xiàn)頁面動(dòng)畫會(huì)抖動(dòng)一下，而且Footer(fixed bottom)會(huì)閃爍，部分手機(jī)還會(huì)莫名其妙在移除translate3d屬性時(shí)Footer不會(huì)reflow到應(yīng)該的位置。
2. 現(xiàn)在采用100%高度布局，但是隨之而來的問題是所有的涉及滾動(dòng)的組件例如ImageLazy、Swing(滾動(dòng)懸浮)等的實(shí)現(xiàn)要依賴于父容器的scroll而不是window的scroll導(dǎo)致組件寫起來很麻煩，因?yàn)橐紤]組件的加載和銷毀問題；另外一直不太喜歡100%高度布局，覺得犧牲了很多瀏覽器的性能優(yōu)化；并且后退頁面時(shí)，即使使用了Redux來恢復(fù)數(shù)據(jù)(我用的React)，Content的滾動(dòng)條并不會(huì)被記憶到之前的位置，瀏覽器只會(huì)記憶window的scroll位置(應(yīng)該是).

如果我再去實(shí)現(xiàn)記錄Content銷毀時(shí)的scroll位置確實(shí)可行，但是感覺越繞越坑，所以請(qǐng)教下，貴公司在自己的產(chǎn)品線中是否有和我一樣的問題，怎么來解決或規(guī)避的呢？

PS: 放棄動(dòng)畫也是一個(gè)選擇....

為了讓問題更清晰，給一個(gè)內(nèi)部的React組件DEMO庫，這個(gè)是100%高度布局的方案，打開后滾到底部，任意點(diǎn)擊一個(gè)范例再返回，會(huì)發(fā)現(xiàn)Content的scroll位置不會(huì)還原。