search

ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.12k stars 14.64k forks source link

Dialog内select tree等组件在点击箭头时有虚晃 #2461

Closed erguotou520 closed 7 years ago

erguotou520 commented 7 years ago

Broswer

Chrome

Reproduction Link

直接看官网 http://element.eleme.io/#/zh-CN/component/dialog#zi-ding-yi-nei-rong

Steps to reproduce

点击【嵌套表单的Dialog】，重复点击select

What is actually happening?

可以看到Dialog有1px的晃动，导致页面模糊

Leopoldthecoder commented 7 years ago

Windows 上才有？试试把 .el-input__icon 的 width 改成 36px 能不能解决问题，可以的话我就这么改。

erguotou520 commented 7 years ago

我测试了下几个同事的机子，都是windows的，有1个能重现，1个不能重现...... 我这次改css发现已经不起作用了......

erguotou520 commented 7 years ago

然后我试了下换掉iconfont，改用css实现，大致代码如下

.el-input__icon {
    position: absolute;
    right: 0;
    width: 36px;
    height: 36px;
}
.el-input__icon::before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px;
    border-color: #999 transparent transparent transparent;
    top: 14px;
    left: 10px;
}

这个是改动之前的效果 before 这个是改过之后的 after

erguotou520 commented 7 years ago

我想这就是为什么会搞一个octicons的原因吧，iconfont有些不可控因素

lincenying commented 7 years ago

win7 + chrome 56 没发现问题.

erguotou520 commented 7 years ago

win 10 + Chrome 55

zlab commented 7 years ago

这个问题很急啊，有解决办法了吗

Tronsfey commented 7 years ago

Dialog里面嵌入tabs 也会出现文字抖动闪烁的问题 见：http://jsfiddle.net/ad3yLz16/1/

更新： 看了下发现这个文字抖动和闪烁的问题应该是由el-dialog样式中的transform:translateX导致的， dialog嵌tabs修改之后：http://jsfiddle.net/5hhrxdou/ 官网dialog嵌select示例修改之后：http://jsfiddle.net/b9h1wke7/

貌似还是会有轻微闪烁~

zlab commented 7 years ago

试下加入这段css

.el-dialog{
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
}

http://jsfiddle.net/zhanqi/b9h1wke7/2/

Leopoldthecoder commented 7 years ago

Fixed in #6088

Bluebang commented 7 years ago

.el-dialog{ transform: none; left: 0; position: relative; margin: 0 auto; }

这个在qq浏览器上面有bug

shomychen commented 6 years ago

el-dialog加上transform: none;这个样式后实际上弹窗中的文字还是会出现抖动，好像主要是因为select等组件定义的CSS3动画（transition: .3s）影响到的，网上查到一个方式，给添加串-webkit-backface-visibility: hidden;就不会了。 .el-dialog{ -webkit-backface-visibility: hidden; }

https://jsfiddle.net/shomychen/ufpu2vas/

scue commented 6 years ago

我直接在官网的Demo上进行操作的，发现Mac OS环境下的Chrome Version 63.0.3239.84 (Official Build) (64-bit) 也有这个问题，录像的帧率不高，实际上看到的抖动很利害，CPU占用也高。

qq20171214-154951-hd

scue commented 6 years ago

这个问题应该reopen一下。

scue commented 6 years ago

刚刚使用Safari浏览器[Version 11.0.2 (13604.4.7.1.3)]测试了一下，没有这个问题，但Chrome的快要闪瞎眼了~~

DakerHub commented 6 years ago

我也是有这个问题,el-select多选时抖动很厉害

ifredom commented 5 years ago

使用最新版得2.7也有这个问题

image