当前位置：文江博客话题详情

输入字段留下 CSS3 转换的痕迹（在 Chrome 15 中）

发布于 2024-12-14 21:02:49 字数 215 浏览 3 评论 0原文

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

当您单击输入然后进行模糊时，伪像会留下Chrome 15 中的屏幕。我第一次注意到这个问题是在我一直在开发的一个网站上，所以我删除了所有内容，只保留了输入字段和一个按钮。当我删除按钮时，转换发生得很好。有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

友欢 2024-12-21 21:02:49

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

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

这将强制 Chrome 使用您的 GPU 来完成所有渲染，这将解决伪像问题并使您的动画变得更加窒息。

Add this CSS to your input field:

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

This will force Chrome to use your GPU to do all the rendering which will solve the artifacts problem and make your animations smother.

回复收藏 0 原文

一花一树开 2024-12-21 21:02:49

这是 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 演示解决方法

This is a bug in Chrome's rendering of CSS transitions. But you can workaround it by forcing element "refresh" operation. Please note that you need to refresh not the input element, but it's parent, so the following code will help you:

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

And repaint class should have something related to parent's view, for example different color: