Element: [Bug Report] table table jitter bug

[Laipt]

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?

抖动得厉害

[element-bot]

Translation of this issue:

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

Look at the code, it's reappeared

What is Expected?

No jitter

What is actually happening?

Quickly shaking

[D1N910]

（1）你的示例不能够重现问题
（2）我也出现了这个bug
————————
针对（2），我的判断是 当未设定列表宽时，element有做自动检测适应。这造成了一种情况，即上下滚动条的出现时，触发宽度，使得上下滚动条消失，再次触发宽度变换，然后如此循环。

证明——
A、当chrome浏览器宽度足够大，以至于不会显示上下滚动条；
B、当chrome浏览器宽度足够小，以至于一定会显示上下滚动条。
A、B都不会触发上下抽动

当拉伸浏览器到一定宽度时，会触发此问题。

(1) Your example cannot reproduce the problem
(2) I also have this bug
————————
For (2), my judgment is that when the list width is not set, the element has automatic detection and adaptation. This creates a situation where the width of the upper and lower scrollbars is triggered, causing the upper and lower scrollbars to disappear, triggering the width transform again, and then looping.

prove--
A. When the chrome browser is wide enough, it does not display the up and down scroll bars;
B. When the width of the chrome browser is small enough, the scroll bar will be displayed.
A, B will not trigger up and down twitching

This issue is triggered when the browser is stretched to a certain width

[Laipt]

@D1N910 新版chrome75会出现这个问题，您是否是这个版本？

[D1N910]

@Laipt
我的版本
Chrome 版本 74.0.3729.169（正式版本） （64 位）
我留意到之前也有个issues，描述该问题也挺到位的
https://github.com/ElemeFE/element/issues/15771

My version
Chrome Version 74.0.3729.169 (official version) (64-bit)
I noticed that there was also an issue before, and the problem was also in place.
https://github.com/ElemeFE/element/issues/15771

[D1N910]

@Laipt
更新到了 Chrome 版本 75.0.3770.100（正式版本） （64 位）依旧能够复现
Updated to Chrome version 75.0.3770.100 (official version) (64-bit) still reproducible

[D1N910]

@Laipt
我找到一个解决方案：
给容易在宽度小的时候换行的数据（比如时间）给一个固定的列宽度。
I found a solution:
Give a fixed column width to data (such as time) that is easy to wrap when the width is small

[D1N910]

@Laipt
说件令人高兴的事情，在innerWidth 1920，innerHeight 925的情况下，你的代码示例能够复现✅
Say something pleasing, in the case of innerWidth 1920, innerHeight 925, your code example can be reproduced✅

[Laipt]

@D1N910
我的解决方法是给出现滚动条的 div 添加一个 height: 100%; 之后就不会出现抖动

[zzzgit]

thank you guys for your feedback

[rickysang]

Duplicate of #16089

[hanzoz]

does the height:100% for the affected div will solved the problem permanently or we need to wait for fix?

[CoderJingt]

请问这个问题 如何解决

[hanzoz]

请问这个问题 如何解决

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

[cdqfeng]

看看el-table的父元素有没有设置过flex:1的，给它加上overflow-x:hidden

[Louis14lan]

给table加个99.9%的width样式就好了，具体原因木知

[ke1vin1993]

只有在Windows下能复现 mac默认滚动条不占据宽度

[ltlwill]

@D1N910
我的解决方法是给出现滚动条的 div 添加一个 height: 100%; 之后就不会出现抖动

给table加个99.9%的width样式就好了，具体原因木知

666 确实这样可以暂时解决

[DragonCat1]

只有在Windows下能复现 mac默认滚动条不占据宽度

mac下也有问题

[ziyoung]

2019年06月27日
暂时的解决方案是给某一列指定宽度。

[flyinglove]

2019年06月27日
暂时的解决方案是给某一列指定宽度。
这种方案貌似不行，我用上面的dmeo试了下， 还是会抖动

[ziyoung]

@flyinglove 提供一个 demo 以及运行环境。我在本地看了一下，bug 仅仅在特定条件下才会重现。

[flyinglove]

@flyinglove 提供一个 demo 以及运行环境。我在本地看了一下，bug 仅仅在特定条件下才会重现。

@ziyoung , 这还是上面那个demo, 我这边只有打开控制台才能复现

[Laipt]

@flyinglove 提供一个 demo 以及运行环境。我在本地看了一下，bug 仅仅在特定条件下才会重现。

@ziyoung , 这还是上面那个demo, 我这边只有打开控制台才能复现

我这个 demo 出现抖动的原因是因为 flex布局，解决办法可以给 el-main 添加一个width:0 或者 height: 100% 都能解决问题

[luckyCao]

看起来是 flexbox 子元素设置了 overflow: auto 导致的浏览器 bug
https://bugs.chromium.org/p/chromium/issues/detail?id=927066
https://support.google.com/chrome/thread/3101009?hl=en

[goSunadeod]

给table加个99.9%的width样式就好了，具体原因木知

这个并不能，只是你那台电脑可以解决，但是遇到其他分辨率，极限情况，还是会出现抖动

[chenyiqiao]

@ziyoung 给一个暂时的解决方案就close 掉了？ 另外，你这个临时解决方案并不通用，不可能给所有表格加上固定宽度

[wangzm123]

el-table 增加99.9%的宽度可以解决大部分的， 有部分还是会出现抖动

[xuexing9527]

看看el-table的父元素有没有设置过flex：1的，给它加上overflow-x：hidden

非常感谢，的确解决了问题 。请教下，具体原因是什么？为什么这样可以解决？

[angelsunshuli]

个人见解：因为在实际项目中也遇到闪动问题，所以大致看了一下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。进而，出现了滚动条时隐时现的问题。

[CoderJingt]

?

在 2020-07-17 10:09:38，"angelsunshuli" [e-mail] 写道：

个人见解：因为在实际项目中也遇到闪动问题，所以大致看了一下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.

[yuqingvile]

有没有解决办法，试了上边的几个都不行

[Hiayao]

用了上面的方法还是无法解决