SPA页面切换动画中Fixed定位问题

Question

背景描述：
单页面应用，为了体验的原因，在路由切换时，页面切换之间加上了动画效果。
为了让动画不卡顿，放弃了js的方案，使用translate3d效果，但是这样会导致Page容器中的fixed定位失效。

代码结构：(Footer可能没有, Header和Footer都是fixed定位)

Page         Page
  Header       Header
  Content      Content
  Footer       Footer

问题描述：

1. 之前的解决方案是在动画切换之前再给Page加上translate3d属性，结束后去除，然后发现页面动画会抖动一下，而且Footer(fixed bottom)会闪烁，部分手机还会莫名其妙在移除translate3d属性时Footer不会reflow到应该的位置。
2. 现在采用100%高度布局，但是随之而来的问题是所有的涉及滚动的组件例如ImageLazy、Swing(滚动悬浮)等的实现要依赖于父容器的scroll而不是window的scroll导致组件写起来很麻烦，因为要考虑组件的加载和销毁问题；另外一直不太喜欢100%高度布局，觉得牺牲了很多浏览器的性能优化；并且后退页面时，即使使用了Redux来恢复数据(我用的React)，Content的滚动条并不会被记忆到之前的位置，浏览器只会记忆window的scroll位置(应该是).

如果我再去实现记录Content销毁时的scroll位置确实可行，但是感觉越绕越坑，所以请教下，贵公司在自己的产品线中是否有和我一样的问题，怎么来解决或规避的呢？

PS: 放弃动画也是一个选择....

为了让问题更清晰，给一个内部的React组件DEMO库，这个是100%高度布局的方案，打开后滚到底部，任意点击一个范例再返回，会发现Content的scroll位置不会还原。

Answer 1

transform是会让fixed失效http://www.zhangxinxu.com/wor...