position:fixed定位问题的解决

本篇文章介绍了一个在开发中遇到的诡异的问题，排查问题过程颇为艰辛，不过最终结果还是值得的，因为巩固了一些基础知识和好的调试方法，它们是：

fixed定位的特点

样式优先级的判定

如何使用浏览器的DOM还原一闪即逝的错误效果

1. 问题说明

在猎萝卜-猎头端，测试提出这样一个bug（禅道编号12828）：

在猎萝卜的订单 - 我的职位 - 已接单入口，点击右侧职位列表的任意职位，在弹出职位预览之前（图2），会先看到职位详情的底部串到左下角位置（图1）

图1 异常状态

图2 回到正常的状态

2. 调用过程

线框说明图1

首先介绍下触发整个动作的逻辑，为了方便理解，借用上面的线框图来说明：

projectList.vue是职位列表，其中每个职位对应的条目封装成了order-project-item.vue，点击order-project-item.vue后，会触发事件全局的expandOrderPreview
order-project-preview.vue作为一个常驻在界面右侧的组件，默认是收起在屏幕右侧的，在侦听到了expandOrderPreview事件以后，会从右侧弹出
next-bar-affix.vue作为order-project-preview.vue底部的子组件，会一起出现和消失

3. 具体的代码逻辑

在下图中的逻辑代码，整理成如下描述：

order-project-item.vue触发点击事件expandOrderPreview，被order-project-preview.vue侦听到，然后进行如下处理：

第一步 emit showOrderPreview事件
- 父级app-frame.vue收到showOrderPreview事件，给引用的order-project-preview.vue添加一个.previewing的样式
- .previewing会使order-project-preview.vue的宽度从0变到特定宽度从而在右侧展示
第二步调用refresh方法
- 将loading设置为2，order-project-preview.vue中详情面板受到loading==0的v-if控制，因此会隐藏；loading组件发现loading>0因此会有加载效果
- 异步调用getProjectDetail和getOrders 这两个方法，直到结果返回，loading值会递减至0，详情才开始正常展示，加载效果才会去除

order-project-preview.vue侦听到弹出事件

app-frame.vue被order-project-preview.vue的emit触发进行previewing样式添加

order-project-preview.vue的refresh方法的逻辑

order-project-preview.vue的模板

4. 一些基础知识

解决问题之前，通过查看样式代码，我们巩固了一些基础知识。

如下是抽取出来的DOM结构和样式设置：

<div class="app-frame">
  <div class="order-project-preview">
    <div class="next-bar-affix">
      <div class="h-affix" style="bottom:0"></div>
    </div>
  </div>
</div>

.order-project-preview {
  position: fixed;
  top: 0;
  bottom:0;
  right: 0;
  width: 300px;
}
.next-bar-affix {
  position: fixed;
  bottom: 0;
}
.next-bar-affix .h-affix {
  position: fixed;
  height: 60px;  
}

.order-project-preview进行position: fixed设置后，DOM的位置会相对视口固定，通过left, right, top, bottom来设置定位
在上述示例代码中，.order-project-preview宽度300px，高度撑满屏幕，底部栏 .next-bar-affix底部内容区的高度为30px
其中.next-bar-affix部分的代码是由heyui的affix组件生成的，一个有意思的启发是，在.h-affix中也添加了一个bottom:0的属性。可以尝试将该属性去除，会发现底部的内容区域会跑到最底部之下，变得不可见。
综上，可以从上述效果图推测的一个结论是：

如果一个子容器设置了fixed定位，它的父容器也是fixed，那么在不指定子容器的left, right, top, bottom时，子容器的边界会以父容的top left作为边界。进一步可以推断，在我们的问题中，必然是有什么因素使得作为父容器的.order-project-preview失去了作为子容器定位基准的条件**，从而跑到了视口的左下角。

5. 具体推测

做过的一些不靠谱的推测：一个DOM样式的变化 A->A+B 实际上是 A -> 无 -> A+B，即order-project-preview.vue增加 .previewing的过程中，容器样式到无的中间过程暂时使得next-bar-affix.vue丢失了left的基准，从而导致在中过程中串到了视口左下角。

this.$emit('showOrderPreview');
this.refresh();

基于上述推测，为了解决这个问题，考虑将上述两行代码对调：

先让refresh的逻辑去触发order-project-preview.vue的隐藏，自然也就隐藏了next-bar-affix.vue
再触发showOrderPreview事件来order-project-preview.vue的展开
等 refresh触发的异步调用结束以后，order-project-preview.vue中的具体内容才连同next-bar-affix.vue被展示出来

但结果不如预期的那样，猜想也许是refresh 成功隐藏next-bar-affix.vue之前，this.$emit('showOrderPreview');的逻辑引起的弹出生效了，于是添加了如下代码（事实上纯属没有依据的HardCode）：

this.$emit('showOrderPreview');
this.$nextTick(() => {
  this.refresh();
})

运行，没在出现如上所示的问题，似乎是解决了。

6. 问题又重现了

然后，提交代码后，测试同学告知，该问题又重现了，重现步骤姑且略过，这时候联想到之前排错的过程中，就猜想可能跟浏览器的渲染顺序有关系，然后把浏览器的工作原理的基础介绍翻阅了一遍，但并没有解答这个问题。

又想起团队的caoq同学分享过如何监听DOM上的属性变化。问题难点无非在于无法让浏览器在某个异常的时刻停下来，如果能停下来观测DOM的结构和样式，差不多就可以排查到问题根源。于是给order-project-preview.vue的根节点设置了attribute modification的断点（设置方法如下图所示）：

image.png

这时候意外地发现在异常发生时，主界面order-proejct-preview.vue的内容已经加载出来了(但却没显示），即不存在next-bar-affix.vue 丢失默认的left基准的问题。

倒是发现了该容器上添加了一个 .h-loading-parent的样式，这个样式定位为 relative 。由此基本能确定了在heyui的loading组件的渲染中，会修改所在父容器order-project-preview.vue的样式，给它添加上.h-loading-parent。

因为 order-project-preview.vue 最外围默认的样式是 fixed, 被.h-loading-parent覆盖之后变成了 relative（它们具有相同的优先级，后出现的relative覆盖前出现的fixed），从而导致了next-bar-affix.vue的left基准丢失。我们只要把给弹出的面板order-project-preview.vue加上更高优先级的fixed定位即可。

//loaing组件提供 样式
.h-loading-parent {
  position: relative;
}

// 自书写的样式
.order-project-preview-page {
  // 两个class累积的优先级为2，大于.h-loading-parent的1：
  &.previewing {
    position: fixed;
  }
}

7. 再深入一些

问题：断点过程已经渲染好的面板却看不到内容,只看到一个错位的底部栏

通过查看heyui的<loading>组件源码的样式可以发现：

heyui组件在loading完毕后，会设置500ms的timeout来清除.h-loading-parent的样式（参加下图1），即内容渲染出来了，但是样式500ms内还没去除，也就导致了relative引起的错位
relative的属性同样影响到了 .order-project-preview-page.previewing 的高度，因为它的各个子元素无一例外都absolute的，因此这样的文档流无高度的，而被覆盖的fixed，通过了 top',bottom`赋予了它和视口相同的高度。

Loading的渲染代码

问题2 我们在本地代码上无法重现该问题

在本地代码运行在浏览器的样式发现：.order-project-preview-page上设置的fixed的优先级高于 h-loading-parent的relative。

因此可以做一个猜测

在开发环境中库的样式被先加载，自己组件内地样式后加载，如果计算的优先级的值一样的话，自己组件的样式自然就失效了。
在线上环境，样式的代码经过压缩以后，并不能保留开发环境中的出现顺序，因此需要人为的设置来保证所期待的优先级。