解决element-ui在在safari浏览器中 抽屉组件 出现动画错误

解决element-ui在在safari浏览器中 抽屉组件 出现动画错误

问题演示

在官网上的版本 出现此问题是在2.13.0版本之后，之前的版本没有任何问题。

2.13.0之前和之后的的版本代码对比

2.12.0

....
  data() {
     
    return {
     
      closed: false,
      prevActiveElement: null
    };
  },
  watch: {
     
    visible(val) {
     
      if (val) {
     
        this.closed = false;
        this.$emit('open');
        if (this.appendToBody) {
     
          document.body.appendChild(this.$el);
        }
        this.prevActiveElement = document.activeElement;
        this.$nextTick(() => {
     
          Utils.focusFirstDescendant(this.$refs.drawer);
        });
      } else {
     
        if (!this.closed) this.$emit('close');
        this.$nextTick(() => {
     
          if (this.prevActiveElement) {
     
            this.prevActiveElement.focus();
          }
        });
      }
    }
  },
....

2.13.1

....
   data() {
     
    return {
     
      closed: false
    };
  },
  watch: {
     
    visible(val) {
     
      if (val) {
     
        this.closed = false;
        this.$emit('open');
        if (this.appendToBody) {
     
          document.body.appendChild(this.$el);
        }
      } else {
     
        if (!this.closed) this.$emit('close');
      }
    }
  },
....

上面是造成问题的关键，为什么会造成这样的问题呢？

这段代码是为了触发focus，触发focus 造成动画偏移，在safari浏览器中 如果抽屉组件中唯一可focus的元素是element的按钮组件，则改抽屉出现的动画定位会偏移并且动效不对，如果把该组件的头部隐藏，内容中没有按钮，这样就没有这样的问题啦！可以测试下，本人测试没有问题！

解决方案

1. 降低版本
2. 替换成原生则没有这样的问题
3. 自己封装一个组件
4. 改源码，上面红色框中的代码去掉