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

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 和互联网上的许多其他地方所述。

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

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

显示：表格

它被窃听了，当额外的“}”出现时，它使“.search-group”字段 css 无效。

我将那里的显示选项表单移至“.header-search”，这是最终结果：

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

对我来说，它解决了问题。试试看，告诉我它是否也为你解决了问题。