position:fixed定位问题的解决

2018-09-28  本文已影响2391人  tangyefei

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

  • fixed定位的特点
  • 样式优先级的判定
  • 如何使用浏览器的DOM还原一闪即逝的错误效果

1. 问题说明

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

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

图1 异常状态 图2 回到正常的状态

2. 调用过程

线框说明图1 线框说明图1

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

3. 具体的代码逻辑

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

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

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;  
}

如果一个子容器设置了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 成功隐藏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>组件源码的样式可以发现：

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

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

因此可以做一个猜测

上一篇 下一篇

猜你喜欢

热点阅读