Google chrome 从CSS3转换中留下工件的输入字段（在Chrome15中）

---

当你点击输入，然后进行模糊，工件会留在Chrome15的屏幕上。我第一次注意到这个问题是在我开发的一个网站上，所以我删除了所有内容，只保留了输入字段和按钮。当我移除按钮时，转换发生得很好。有什么想法吗

这是Chrome渲染CSS转换时的一个错误。但您可以通过强制元素“刷新”操作来解决这个问题。请注意，您需要刷新的不是

输入

元素，而是它的父元素，因此以下代码将帮助您：

$(document).ready(function(){
    $('#test').blur(function(){
      $(this).parent().addClass('repaint');
    });
    $('#test').focus(function(){
      $(this).parent().removeClass('repaint');
    });
});

和

repaint

类应具有与父视图相关的内容，例如不同的颜色：

.repaint {
 color: red;
}

但您可以将

color

替换为

visibility

或其他与视图相关（但对父级不重要/可见）的属性

---

下面演示解决方法

将此CSS添加到输入字段：

input {
    -webkit-transform: translate3d(0,0,0)
}

---

这将迫使Chrome使用您的GPU进行所有渲染，这将解决瑕疵问题并使您的动画窒息。

我在Safari中遇到了类似的盒子阴影瑕疵问题，并发现添加了

-webkit transform:scale（1）到焦点规则修复了该问题

看，现在应该可以正常工作了

正如塞萨尔所说，
-webkit转换：translate3d（0,0,0）
将修复它，但它也会影响文本渲染。
可能是chrome渲染错误。我也有它，但没有按钮，奇怪的是肯定是重画/重绘错误。这很有效。当我将此属性应用于设置所有过渡的样式块时，它破坏了布局中的某些内容。我刚刚通过一个类设置了这个属性，它成功了！这可能会导致另一个问题：z索引可能会出错。这不起作用，我尝试使用
jQuery
回调以及
promise（）.done（）
translate3d

解决方案将类应用于动画元素和主体。。。