Mở rộng hộp nhập liệu với -webkit-transform

Question

Tôi đã áp dụng biến đổi CSS sau cho hộp nhập HTML.

-webkit-transform: scale(.5); 

Khi tôi nhập văn bản vào hộp nhập liệu cho đến khi nó đã lấp đầy vùng hiển thị, dấu mũ tiếp tục qua cạnh đầu vào và bị ẩn. Thông thường dấu mũ và văn bản sẽ cuộn khi bạn nhập.

Văn bản cuối cùng sẽ bắt đầu cuộn khi dấu mũ đã đi theo chiều rộng của đầu vào được chia tỷ lệ trước. Trình duyệt dường như đang bỏ qua việc mở rộng quy mô khi tính toán thời điểm cuộn văn bản.

Đây chỉ là vấn đề với trình duyệt WebKit (được thử nghiệm với Chrome và iPad). Tương đương -moz-transform hoạt động tốt trong FireFox. Thuộc tính zoom hoạt động tốt trong webkit, nhưng nó không đủ mượt mà khi mở rộng trên iPad, vì vậy tôi không thể sử dụng nó cho dự án của mình.

Bạn có thể thấy một ví dụ ở đây: http://jsfiddle.net/4Kv6w/

Hộp đầu vào đầu tiên là với tỉ lệ -webkit-transform. Hộp thứ hai là với bộ thu phóng. Thứ ba là bình thường.

Mọi trợ giúp sẽ được đánh giá cao.

EDIT - Bạn cũng có thể gặp vấn đề mà không cần mở rộng quy mô, bằng cách sử dụng -webkit-transform để di chuyển hộp nhập liệu sang bên trái. Dưới đây là ví dụ: http://jsfiddle.net/4Kv6w/15/

Answer 1

Dường như có lỗi trong WebKit khi sử dụng chuyển đổi CSS để di chuyển hộp nhập liệu sang bên trái. Khi bạn mở rộng một hộp nhập liệu, nó về cơ bản sẽ di chuyển cạnh phải sang trái, đó là cách tôi gặp phải sự cố.

Cách giải quyết đối với tôi là vị trí cách đầu vào hộp bên trái

left: -2000px; 
position: absolute; 

và sau đó di chuyển nó trở lại với CSS transform.

-webkit-transform: matrix(.5, 0, 0, .5, 2000, 0); 

Bạn có thể thấy một ví dụ ở đây: http://jsfiddle.net/4Kv6w/17/

Answer 2

Xin chào, tôi giả sử bạn đang cố tạo hiệu ứng thay đổi. Bạn có thể sẽ có kết quả tốt hơn bằng cách sử dụng chuyển tiếp CSS thay vì một biến đổi nếu đó là trường hợp. Tôi đã tạo ra một fiddle cho bạn để xem và thử nó ra cho chính mình.

jsfiddle

Về cơ bản, tôi có một người biết lắng nghe sự kiện js lắng nghe khi hộp được tập trung. Sau đó, tôi thay đổi chiều rộng trong js và quá trình chuyển đổi sẽ đảm nhiệm hoạt ảnh. Hy vọng rằng điều này sẽ giúp bạn giải quyết vấn đề của mình.