Поле ввода, оставляющее артефакты от перехода CSS3 (в Chrome 15)

Question

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

Когда вы нажимаете на вход, затем продолжаете размытие, артефакты остаются на экране в Chrome 15. Я впервые заметил эту проблему на сайте, который я разрабатывал, поэтому я удалил всено только поле ввода и кнопка.Когда я удаляю кнопку, переход происходит просто отлично.Есть идеи?

Answer 1

Добавьте этот CSS в поле ввода:

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

Это заставит Chrome использовать ваш графический процессор, чтобы выполнить весь рендеринг, что решит проблему с артефактами и сделает ваши анимации удушающими.

Answer 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 , чтобы продемонстрировать обходной путь

Answer 3

У меня была похожая проблема с артефактами теней в Safari, и я обнаружил, что добавление -webkit-transform:scale(1); к правилу фокусировки устранило проблему.

См. http://jsfiddle.net/SYgzJ/48/ - теперь все должно работать нормально.

Как сказал Сезар, -webkit-transform: translate3d(0,0,0); это исправит, но это может повлиять и на отрисовку текста.