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