Question

当我在Chrome中使用宽度转换时，我的元素会抽搐。我该如何解决这个问题？

.search-group input {
   width: 85px;
   -webkit-transition: all ease-in-out .15s;
   transition: all ease-in-out .15s;
}
.search-group input:focus {
   width: 150px;
   outline: none;
}

JSFIDDLE

VIDEO（抱歉质量）

Answer 1

好的我想我修好了。我补充说：

.window_label{
    -webkit-backface-visibility: hidden;
}

jsfiddle

至少在我的机器上它修复了Chrome的抽搐。我发现这是一个官方错误，如here，here以及互联网上的许多其他地方所述。

如评论中所述，此错误会影响不透明度改变的元素。

编辑：试试这个jsfiddle。我想我修好了。我已经离开上述决议，因为它可以为某人服务。无论如何，问题出在

显示：表

它被窃听，当额外的＆＃39;}＆＃39;出现了，它取消了＆＃39; .search-group＆＃39;现场css。

我将显示选项表单移到了＆＃39; .header-search＆＃39;这是最终结果：

.header-search {
    position: absolute;
    top: 6px;
    right: 10px;
    display: table;
}
.search-group {
    position: relative;
    border-collapse: separate;
    display: table-row;
    float: right;
}

对我来说它解决了这个问题。试一试，告诉我它是否也适合你。

Chrome中的元素抽搐 - CSS宽度过渡

1 个答案: