SPA頁面切換動畫中Fixed定位問題

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

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

Page         Page
  Header       Header
  Content      Content
  Footer       Footer

問題描述：

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

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

PS: 放棄動畫也是一個選擇....

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