Input lĩnh vực rời khỏi hiện vật từ chuyển tiếp CSS3 (trong Chrome 15)

Question

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

Khi bạn bấm vào các đầu vào sau đó đi vào mờ, hiện vật còn lại trên màn hình trong Chrome 15. đầu tiên tôi nhận thấy vấn đề này trên một trang web tôi đã được phát triển vì vậy tôi loại bỏ tất cả mọi thứ nhưng chỉ là lĩnh vực đầu vào và một nút. Khi tôi xóa nút, quá trình chuyển đổi diễn ra tốt. Ý tưởng nào?

Answer 1

Thêm CSS này đến lĩnh vực đầu vào của bạn:

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

Điều này sẽ buộc Chrome để sử dụng GPU của bạn để làm tất cả những vẽ mà sẽ giải quyết vấn đề hiện vật và làm cho hình động của bạn mượt mà hơn.

Answer 2

Đây là lỗi trong việc hiển thị chuyển tiếp CSS của Chrome. Nhưng bạn có thể giải quyết nó bằng cách buộc hoạt động "làm mới" phần tử. Xin lưu ý rằng bạn cần phải làm mới không phải là yếu tố input, nhưng đó là cha mẹ, vì vậy đoạn mã sau sẽ giúp bạn:

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

Và repaint lớp nên có một cái gì đó liên quan đến quan điểm của cha mẹ, ví dụ màu sắc khác nhau:

.repaint { 
color: red; 
} 

Nhưng bạn có thể thay thế color bằng visibility hoặc thuộc tính có liên quan đến chế độ xem khác (nhưng không quan trọng/hiển thị cho cha mẹ).

Đây là jsfiddle để chứng minh workaround

Answer 3

Tôi đã gặp phải sự cố tương tự với các tạo phẩm bóng của hộp trong Safari và tìm thêm -webkit-transform:scale(1); vào quy tắc tập trung đã khắc phục sự cố.

Xem http://jsfiddle.net/SYgzJ/48/ - nó sẽ hoạt động tốt ngay bây giờ.

Như Cesar đã nói, -webkit-transform: translate3d(0,0,0); sẽ sửa lỗi, nhưng nó cũng có thể ảnh hưởng đến hiển thị văn bản.