-
Notifications
You must be signed in to change notification settings - Fork 14.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug Report] table table jitter bug #16167
Comments
Translation of this issue: Element UI version2.9.1 OS/Browsers versionWin10/Chrome 75.0.3770.100 Vue version2.6.10 Reproduction LinkHttps://codepen.io/anon/pen/rEjRBZ Steps to reproduceLook at the code, it's reappeared What is Expected?No jitter What is actually happening?Quickly shaking |
(1)你的示例不能够重现问题 证明—— 当拉伸浏览器到一定宽度时,会触发此问题。 (1) Your example cannot reproduce the problem prove-- This issue is triggered when the browser is stretched to a certain width |
@D1N910 新版chrome75会出现这个问题,您是否是这个版本? |
@Laipt |
@Laipt |
@Laipt |
@D1N910 |
thank you guys for your feedback |
Duplicate of #16089 |
does the height:100% for the affected div will solved the problem permanently or we need to wait for fix? |
请问这个问题 如何解决 |
just apply 'height:100%' to the affected div's css, but I'm not sure whether this will affect other things, but it solved my problem |
看看el-table的父元素有没有设置过flex:1的,给它加上overflow-x:hidden |
给table加个99.9%的width样式就好了,具体原因木知 |
只有在Windows下能复现 mac默认滚动条不占据宽度 |
666 确实这样可以暂时解决 |
mac下也有问题 |
|
|
@flyinglove 提供一个 demo 以及运行环境。我在本地看了一下,bug 仅仅在特定条件下才会重现。 |
@ziyoung , 这还是上面那个demo, 我这边只有打开控制台才能复现 |
我这个 demo 出现抖动的原因是因为 flex布局,解决办法可以给 el-main 添加一个width:0 或者 height: 100% 都能解决问题 |
看起来是 flexbox 子元素设置了 overflow: auto 导致的浏览器 bug |
这个并不能,只是你那台电脑可以解决,但是遇到其他分辨率,极限情况,还是会出现抖动 |
@ziyoung 给一个暂时的解决方案就close 掉了? 另外,你这个临时解决方案并不通用,不可能给所有表格加上固定宽度 |
el-table 增加99.9%的宽度可以解决大部分的, 有部分还是会出现抖动 |
非常感谢,的确解决了问题 。请教下,具体原因是什么?为什么这样可以解决? |
个人见解:因为在实际项目中也遇到闪动问题,所以大致看了一下table的宽高计算,目前找到的比较合理的解释如下。
其中offsetHeight为el-table__body的高度,bodyHeight为el-table的高度减去header和footer的高度。在我的页面中,table高度是auto的,所以按照预想,这两个高度应该是一样的,上述的scrollY就会是false。 但是,由于缩放导致的头部换行,导致整个table及其header的高度出现小数点,从而上述计算结果出现了1的误差,scrollY成为true,而且当scrollY为true导致table出现滚动条后,上述计算又重新变为false。进而,出现了滚动条时隐时现的问题。 |
?
在 2020-07-17 10:09:38,"angelsunshuli" <notifications@github.com> 写道:
个人见解:因为在实际项目中也遇到闪动问题,所以大致看了一下table的宽高计算,目前找到的比较合理的解释如下。
页面复现情况:浏览器缩放90%,导致table头部某一列出现换行,在特定的分页的页面中出现频繁抖动。
情况解析:通过查看table部分源码 + 页面调试认为,影响的主要代码为
updateScrollY() {
...
const scrollY = body.offsetHeight > this.bodyHeight;
...
}
其中offsetHeight为el-table__body的高度,bodyHeight为el-table的高度减去header和footer的高度。在我的页面中,table高度是auto的,所以按照预想,这两个高度应该是一样的,上述的scrollY就会是false。
但是,由于缩放导致的头部换行,导致整个table及其header的高度出现小数点,从而上述计算结果出现了1的误差,scrollY成为true,而且当scrollY为true导致table出现滚动条后,上述计算又重新变为false。进而,出现了滚动条时隐时现的问题。
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.
|
有没有解决办法,试了上边的几个都不行 |
用了上面的方法还是无法解决 |
有好的解决方案吗?缩放的时候很容易复现 |
有解决方法吗?chrome 火狐都有这个无限抖动,width:99.9%在窗口调整大小后到达临界值依旧抖动 |
这问题都没解决,怎么关了啊? |
最终解决方案是什么呢? |
el-table set the height, I can solve it here |
My cause here is mainly caused by the header wrapping |
不是吧,我的Mac+Safari上也出现了这个问题,不是浏览器的bug吧。 另外设置99.9%的width,只能解决眼前的问题。换一个分辨率或者换一批数据还有可能出现此问题啊。 |
@ziyoung 提了个 pr,本地试了下应该能修复这个问题 |
咋关闭了呢 |
因为目前 forked repo 里的代码其实还是有问题,后来又做了点修改,运行了段时间目前没再复现。因为感觉解决方案不是特别优雅所以就没推上来,如果有需要我可以整理下重新开 pr,提供个思路 |
辛苦开个pr看看? |
@Eviwang 已提交 PR |
Element UI version
2.9.1
OS/Browsers version
win10 / Chrome 75.0.3770.100
Vue version
2.6.10
Reproduction Link
https://codepen.io/anon/pen/rEjRBZ
Steps to reproduce
具体看代码,已重现
What is Expected?
不出现抖动
What is actually happening?
抖动得厉害
The text was updated successfully, but these errors were encountered: