在 firefox 浏览器中, 或者在 2k 显示屏中, 滚动会导致闪烁, 比较延迟.
只要修改了 transform 或者 absolute 的位置, 就会导致不同步
复现地址,
在 firefox 浏览器中, 滚动表格即可触发此问题, 不知道是什么原因产生的. 但是在 chome 中就很正常. 在 firefox 中会发生很有意思的事情, 就是当你初步进入的时候,会发现滚动闪烁, 但是你按下 f12 审查此元素的时候, 此刻 firefox 就变的正常了.
为了方便大家调试
这里是最小化代码仓库
执行以下命令即可调试代码
git clone https://github.com/Web-Lif/rc-table.git
npm install
npm run start
 |
1
yxcoder Jun 1, 2022
mac chrome ，在滚动的时候，人员名称一栏会出现明显的闪烁，直接拖动滚动条，效果特别明显。人员名称一栏的 DOM 明显和前面的不一样
|
 |
2
qrobot OP @yxcoder 是的， 因为固定列， 也就是 `人员名称` 这一列是通过 transform 来改变位置，达到固定列的效果， 但是我不知道为什么会进行闪烁， 但是如果是在 window chome 环境下就没有 这个问题。 最后经过我测试后知道
1. 在 chome 浏览器中，显示屏不是 2k 等高清显示屏， 或者 win10 中不开启缩放则不进行闪烁 2. firefox 中一定会出现。 我现在没有好的思路，但是很奇怪为什么会产生。mac chrome 估计是高清屏幕缩放导致的， 我有点困惑 |
 |
3
ZenithWang Jun 1, 2022
我这点开链接测试的时候发现，当使用鼠标滚轮进行滚动的时候，会出现滚动十几行之后卡住的情况了，后续在怎么滚动都卡在那不动了。
|
|
4
ZenithWang Jun 1, 2022
对了，测试的时候使用的是微软的 Edge 浏览器与谷歌 chrome 浏览器，都出现这种情况了。
|
|
5
qrobot OP @wzm5201314 什么环境？ 能加一下我 微信吗？在控制台输入 atob('d3hpZF85Z3Y0cGV2OGoxdTMyMQ==')
base64 d3hpZF85Z3Y0cGV2OGoxdTMyMQ== |
|
6
qrobot OP @wzm5201314 有闪烁，但是不应该会卡住才对。
|
 |
7
jchencode Jun 1, 2022
要不看下 Ant Design 如何实现的？ 传送门： https://github.com/react-component/table
|
 |
8
win97 Jun 1, 2022
人员名称这一列的表头以及表格行在 dom 上是同级关系，我觉得是个不合理的设计。此外表头并不是始终都是第一个元素，导致需要通过定位来达到视觉上始终在首行的效果，但子元素的定位是依赖父元素的，需要等待父元素 transform 后，子元素才会重新定位，那我觉得问题可能就出现在这🤔
|
|
9
ZenithWang Jun 1, 2022
@qrobot win10 系统，chrome 和 Edge 浏览器都是这样的了，用的都是最新版的了，微信加不了你了，提示找不到相关的账号或内容了
|
|
10
qrobot OP @win97
``` 人员名称这一列的表头以及表格行在 dom 上是同级关系 ``` 这个确实是无奈之举。 有好的想法吗？ 其实不仅仅只是 Y 方向滚动会出现问题，X 方向滚动也会出现问题， 我把例子里面的列宽度拉开了， 可以在试试看看 有时间吗？ 可以帮我改改吗？ 代码在 `https://github.com/Web-Lif/rc-table.git` 中 |
|
12
ZenithWang Jun 1, 2022
@qrobot win10 系统，chrome 和 Edge 浏览器都是这样的了，用的都是最新版的了。微信加不了你了，提示找不到相关的账号或内容了。我在我同事的电脑上试了一下，没有这种情况了。我不知道是不是我浏览器安装的插件引起的问题了
|
|
13
qrobot OP |
|
15
ZenithWang Jun 1, 2022
@qrobot 兄弟，我试着加你了，微信号跟手机号都试着搜了，搜不到了，要不你试着加下我吧。微信号：bWVuaWFuX3hpbnpob25nZGUtdGE=
|
 |
16
jamosLi Jun 8, 2022
这个应该是 band.js 的问题吧，之前 elementUI 有这个诡异的抽搐问题。还有可能是 flex 弹性布局导致的。没有深入研究，遇到过。
|
Select Language