谁想到导致vxe-table虚拟滚动白屏不是因为性能而是因为背景色

699 阅读1分钟

项目中使用虚拟滚动,滚动一快就会白屏,花了两天时间看了源码,修改源码,检查渲染元素,发现性能是没有问题的,元素渲染的是很快的,跟得上滚动,但是还是会出现白屏。

排除了性能问题,最终我想到会不会是样式问题,发现只要把表格背景色去掉,滚动就不会白屏,这个白屏居然是表格的背景色导致的,解决问题的方法很简单,但定位到问题花了两天时间

v3版本去掉背景色

.vxe-table--main-wrapper .vxe-table--render-default .vxe-table--body-wrapper,
.vxe-table--main-wrapper .vxe-table--render-default .vxe-table--footer-wrapper {
  background-color: transparent !important;
}

v4版本去掉背景色

.vxe-table--render-default .vxe-table--body-wrapper {
    background-color: transparent !important;
}

直接给table设置背景色也没问题 就是给最外层这个div设置背景色,会出现这样情况,感觉这时的浏览器渲染机制是,先渲染背景色,再渲染表格

个人感觉最有可能是绘制顺序的原因 在这里插入图片描述

在这里插入图片描述