输入字段从 CSS3 过渡中留下工件（在 Chrome 15 中）答案

【问题标题】：Input field leaving artifacts from CSS3 transition (in Chrome 15)输入字段从 CSS3 过渡中留下工件（在 Chrome 15 中）
【发布时间】：2011-12-26 04:16:55
【问题描述】：

http://jsfiddle.net/danielcgold/SYgzJ/

当您单击输入然后继续模糊时，Chrome 15 的屏幕上会留下伪影。我首先在我一直在开发的网站上注意到了这个问题，所以我删除了所有内容，只删除了输入字段和一个按钮。当我删除按钮时，转换发生得很好。有任何想法吗？

【问题讨论】：

可能是chrome渲染的bug。
我也有没有按钮的，奇怪
绝对是重绘/重绘错误。

标签： google-chrome css css-transitions

【解决方案1】：

将此 CSS 添加到您的输入字段：

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

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

【讨论】：

这行得通。当我将此属性应用于设置所有转换的样式块时，它破坏了我的布局中的某些内容。我只是通过一个类设置了这个属性，它就起作用了！
这可能会导致另一个问题：z-index 可能会被弄乱。 See here to handle it.

【解决方案2】：

这是 Chrome 呈现 CSS 过渡的一个错误。但是您可以通过强制元素“刷新”操作来解决它。请注意，您需要刷新的不是 input 元素，而是它的父元素，因此以下代码将对您有所帮助：

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

而repaint 类应该有一些与父视图相关的内容，例如不同的颜色：

.repaint {
 color: red;
}

但您可以将color 替换为visibility 或其他与视图相关（但对父级不重要/可见）的属性。

这里是jsfiddle 来演示解决方法

【讨论】：

这不起作用，我尝试使用jQuery 回调以及promise().done() 将类应用于动画元素以及主体，translate3d 解决方案确实有效...

【解决方案3】：

我在 Safari 中遇到了类似的盒子阴影伪影问题，发现在焦点规则中添加 -webkit-transform:scale(1); 可以解决问题。

请参阅http://jsfiddle.net/SYgzJ/48/ - 现在应该可以正常工作了。

正如 Cesar 所说，-webkit-transform: translate3d(0,0,0); 会修复它，但它也会影响文本渲染。

【讨论】：