vue router 切换，position fixed 块闪烁

// router container
<transition name="fade-transform" mode="out-in" class="content">
   <router-view/>
</transition>

// page has fixed footer
<page-container>
   <page-content/>
   <!--position: fixed-->
   <page-footer/>
</page-container>

如代码所示，从另一个页面进入page has fixed footer 会有闪烁，布局不会像预期一样展示。 vue-router issuse Un-fixing Fixed Elements with CSS Transforms 文章中指出transformed element会为所有子元素创建一个containing block，一个在这个containing block下fixed的元素也是一个transformed element，如果这种transformed element在正常文档流中，它会跟着文档滚动，fixed position子元素会跟着transformed element滚动

...where things got really troublesome for me: a transformed element creates a containing block even for descendants that have been set to position: fixed. In other words, the containing block for a fixed-position descendant of a transformed element is the transformed element, not the viewport. Furthermore, if the transformed element is in the normal flow, it will scroll with the document and the fixed-position descendants will scroll with it.

issuse作者在评论中留下了一种结局方案，但是我这边内嵌了两三层transition，改动代价太大，换了一个种布局结构

// position absolute
<page-container>
   <page-content/>
   // position absolute
   <page-footer/>
</page-container>

diveDylan / blog

vue router 切换，position fixed 块闪烁 #2