排查一个因chrome 高版本窗口缩放引起的Bug

情景描述

现场实施人员反馈XX系统在chrome 中 缩小窗口，导致了业务异常，严重影响使用，因为生产环境用户的特殊性，该类问题归结为于比较严重的问题；

在反馈到开发同学这里后，立马进行了初步排查，发现是因为浏览器窗口缩放导致的问题；临时解决方案为，Ctrl + 0 恢复浏览器窗口正常的显示比例；

临时方案最终只能临时过渡使用，bug 的根本原因没有定位，又因为生产环境设备老旧显示器分辨率低，所以他们都对窗口进行了缩放；

不敢怠慢，再一次让测试同学复习问题，经过测试同学的反馈未发现问题；那就必须安排一个demo 来复现该问题了，经过啪啪啪使劲儿一通打，demo 算是写完了。开发环境，测试环境，均没有问题；在另一个开发同学的电脑上却复现了问题；

情景再现

开发环境：vue 2.x + element ui 2.x + chorme v114.x

在页面组件中 监听了窗口的变化，去动态计算表格需要显示的数据量（分页数据的pageSize）自适应窗口的变化以保证table 不出现滚动条;

使用了 el-dialog 显示业务信息后，触发了监听窗口的回调方法；导致了API重新请求，覆盖了业务数据；引起了bug;

分析定位

问题显而易见 因为触发了监听窗口的回调函数，那指定是窗口的大小发生了变化，这点不用怀疑；但是肉眼观察页面没有发现有明显的变化；

那么通过 观察控制台 Elements 面板发现了问题；正常情况下 el-dialog 显示后 会在body 元素上插入 名为 el-popup-parent–hidden 的class ;
但是在复现问题的浏览器中 body 却没有该class存在，而是多了一个 style=”padding-right:9px”

看到这里问题已经很明显了，就是这个差异导致了问题的出现；

那我们快速定位到问题就出现在 el-dialog 中；二话不说翻源码或者 debug 安排；

下面 我们就看一下 el-dialog 发现并没有上面问题的相关代码；

再仔细看一下 发现 mixins 中混入了 Popup

那我们继续看看 Popup 这个 mixin 的内容

Popup源码

import Vue from 'vue';
import merge from 'element-ui/src/utils/merge';
import PopupManager from 'element-ui/src/utils/popup/popup-manager';
import getScrollBarWidth from '../scrollbar-width';
import { getStyle, addClass, removeClass, hasClass } from '../dom';

let idSeed = 1;

let scrollBarWidth;

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    openDelay: {},
    closeDelay: {},
    zIndex: {},
    modal: {
      type: Boolean,
      default: false
    },
    modalFade: {
      type: Boolean,
      default: true
    },
    modalClass: {},
    modalAppendToBody: {
      type: Boolean,
      default: false
    },
    lockScroll: {
      type: Boolean,
      default: true
    },
    closeOnPressEscape: {
      type: Boolean,
      default: false
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    }
  },

  beforeMount() {
    this._popupId = 'popup-' + idSeed++;
    PopupManager.register(this._popupId, this);
  },

  beforeDestroy() {
    PopupManager.deregister(this._popupId);
    PopupManager.closeModal(this._popupId);


    this.restoreBodyStyle();
  },

  data() {
    return {
      opened: false,
      bodyPaddingRight: null,
      computedBodyPaddingRight: 0,
      withoutHiddenClass: true,
      rendered: false
    };
  },

  watch: {
    visible(val) {
      if (val) {
        if (this._opening) return;
        if (!this.rendered) {
          this.rendered = true;
          Vue.nextTick(() => {
            this.open();
          });
        } else {
          this.open();
        }
      } else {
        this.close();
      }
    }
  },

  methods: {
    open(options) {
      if (!this.rendered) {
        this.rendered = true;
      }

      const props = merge({}, this.$props || this, options);

      if (this._closeTimer) {
        clearTimeout(this._closeTimer);
        this._closeTimer = null;
      }
      clearTimeout(this._openTimer);

      const openDelay = Number(props.openDelay);
      if (openDelay > 0) {
        this._openTimer = setTimeout(() => {
          this._openTimer = null;
          this.doOpen(props);
        }, openDelay);
      } else {
        this.doOpen(props);
      }
    },

    doOpen(props) {
      if (this.$isServer) return;
      if (this.willOpen && !this.willOpen()) return;
      if (this.opened) return;

      this._opening = true;

      const dom = this.$el;

      const modal = props.modal;

      const zIndex = props.zIndex;
      if (zIndex) {
        PopupManager.zIndex = zIndex;
      }

      if (modal) {
        if (this._closing) {
          PopupManager.closeModal(this._popupId);
          this._closing = false;
        }
        PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), this.modalAppendToBody ? undefined : dom, props.modalClass, props.modalFade);
        if (props.lockScroll) {
          this.withoutHiddenClass = !hasClass(document.body, 'el-popup-parent--hidden');
          if (this.withoutHiddenClass) {
            this.bodyPaddingRight = document.body.style.paddingRight;
            this.computedBodyPaddingRight = parseInt(getStyle(document.body, 'paddingRight'), 10);
          }
          scrollBarWidth = getScrollBarWidth();
          let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
          let bodyOverflowY = getStyle(document.body, 'overflowY');
          if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === 'scroll') && this.withoutHiddenClass) {
            document.body.style.paddingRight = this.computedBodyPaddingRight + scrollBarWidth + 'px';
          }
          addClass(document.body, 'el-popup-parent--hidden');
        }
      }

      if (getComputedStyle(dom).position === 'static') {
        dom.style.position = 'absolute';
      }

      dom.style.zIndex = PopupManager.nextZIndex();
      this.opened = true;

      this.onOpen && this.onOpen();

      this.doAfterOpen();
    },

    doAfterOpen() {
      this._opening = false;
    },

    close() {
      if (this.willClose && !this.willClose()) return;

      if (this._openTimer !== null) {
        clearTimeout(this._openTimer);
        this._openTimer = null;
      }
      clearTimeout(this._closeTimer);

      const closeDelay = Number(this.closeDelay);

      if (closeDelay > 0) {
        this._closeTimer = setTimeout(() => {
          this._closeTimer = null;
          this.doClose();
        }, closeDelay);
      } else {
        this.doClose();
      }
    },

    doClose() {
      this._closing = true;

      this.onClose && this.onClose();

      if (this.lockScroll) {
        setTimeout(this.restoreBodyStyle, 200);
      }

      this.opened = false;

      this.doAfterClose();
    },

    doAfterClose() {
      PopupManager.closeModal(this._popupId);
      this._closing = false;
    },

    restoreBodyStyle() {
      if (this.modal && this.withoutHiddenClass) {
        document.body.style.paddingRight = this.bodyPaddingRight;
        removeClass(document.body, 'el-popup-parent--hidden');
      }
      this.withoutHiddenClass = true;
    }
  }
};

export {
  PopupManager
};

大概的扫一遍发现了 问题，就是这个 doOpen 函数，我们来看一下这个函数，为了方便观看我们加上一些简单的注释：

doOpen(props) {
      if (this.$isServer) return;
      if (this.willOpen && !this.willOpen()) return;
      if (this.opened) return;
      this._opening = true;
      const dom = this.$el;
      const modal = props.modal;
      const zIndex = props.zIndex;
      if (zIndex) {
        PopupManager.zIndex = zIndex;
      }
      if (modal) { // 
        if (this._closing) {
          PopupManager.closeModal(this._popupId);
          this._closing = false;
        }
        
        PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), this.modalAppendToBody ? undefined : dom, props.modalClass, props.modalFade);

          // 我们从这开始---- props.lockScroll 在 el-dialog 中默认是true;
        if (props.lockScroll) {
        
          // 判断 body 上 有没有 'el-popup-parent--hidden' 存在； 
          this.withoutHiddenClass = !hasClass(document.body, 'el-popup-parent--hidden');

          // 如果没有 'el-popup-parent--hidden' 就进行下列操作...
          if (this.withoutHiddenClass) {

            // 获取 body 的 padding-right
            this.bodyPaddingRight = document.body.style.paddingRight;

            // 格式化 body 的padding-right 为10进制 int 
            this.computedBodyPaddingRight = parseInt(getStyle(document.body, 'paddingRight'), 10);

          }
          // 获取滚动条的宽度 
          scrollBarWidth = getScrollBarWidth();
          // body 有没有 溢出， 我们的问题就出现在这个地方  
          let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
           
          // 获取body 的  overflow-y 样式
          let bodyOverflowY = getStyle(document.body, 'overflowY');

          // 如果 滚动条宽度大于0 并且 body 有益处 再或者 body 的 overflow-y 设置了 scroll 并且 body没有el-popup-parent--hidden classs , 就设置 body 的padding-right 为 现有padding-right + 滚动条的宽度； 问题就出现这这个条件为真了
          if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === 'scroll') && this.withoutHiddenClass) {

            document.body.style.paddingRight = this.computedBodyPaddingRight + scrollBarWidth + 'px';

          }
          // 给body添加el-popup-parent--hidden class 
          addClass(document.body, 'el-popup-parent--hidden');

        }


      }

      if (getComputedStyle(dom).position === 'static') {
        dom.style.position = 'absolute';
      }
      dom.style.zIndex = PopupManager.nextZIndex();
      this.opened = true;
      this.onOpen && this.onOpen();
      this.doAfterOpen();

    },

最后我们发现，一定是 **scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === ‘scroll’) && this.withoutHiddenClass ** 这个条件满足了；

那我们跟着debug 走两遍 找出在正常情况下个异常情况下几个条件的不同；

经过 我们几遍的debug 发现了 问题；

在窗口缩放模式下：
let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;

这个 bodyHasOverflow 为true 了；

经过 查看 document.documentElement.clientHeight 和 document.body.scrollHeight 的值 发现他们有1px 的差；而正常缩放模式下的却是相等的；那么问题的解决办法就相对不复杂了；

解决方案

那我们仔细观察发现一个是获取了 html（document.documentElement） 的 clientHeight 一个是获取了 body（document.body） 的 scrollHeight；

那我们的基本解决办法就是 document.documentElement 修改为 document.body

因为我们是私有仓库 修改完，发布一个新版本，更新到业务系统中就OK了，

后的最后

下面请上我们今天的主角：有请小趴菜