使用-webkit-transform縮放輸入框

我將以下CSS轉換應用於HTML輸入框。使用-webkit-transform縮放輸入框

-webkit-transform: scale(.5);

當我鍵入文本輸入框，直到它填補了可視面積，光標延續了以往的輸入的邊緣和隱藏。通常插入符號和文本會在您輸入時滾動。

一旦插入符號已經進入預縮放輸入的寬度，文本最終會開始滾動。在計算何時滾動文本時，瀏覽器似乎忽略了縮放比例。

這只是WebKit瀏覽器的問題（使用Chrome和iPad進行測試）。 FireFox中的-moz-transform等效工作正常。 zoomkit屬性在webkit中可以正常工作，但在iPad上縮放時它不夠流暢，所以我不能真正將它用於我的項目。

這裏你可以看到一個例子：http://jsfiddle.net/4Kv6w/

第一個輸入框與WebKit的轉換比例。第二個框是放大縮放。第三是正常的。

任何幫助將不勝感激。

編輯 - 您還可以通過使用-webkit-transform將輸入框移動到左側來縮放問題而不縮放。這裏是一個例子：http://jsfiddle.net/4Kv6w/15/

爲什麼你需要調整輸入？如果它的父縮放，也許你可以用scale（1.5）來「縮放」它，但是通過寬度高度和字體大小來使它看起來更小。 – Duopixel 2012-01-08 07:43:40

有趣的問題！ – 2012-01-08 07:53:30

難道你不能只在輸入元素上設置較小的寬度/高度/字體大小？ – 2012-01-08 07:54:46

當使用CSS轉換將輸入框移動到左側時，似乎WebKit中存在一個錯誤。當您縮小輸入框時，它實際上會將右邊移到左邊，這就是我遇到問題的方式。

對我來說，解決方法是輸入框的方式定位到左

left: -2000px; 
position: absolute;

，然後將其移回用CSS變換。

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

這裏你可以看到一個例子：http://jsfiddle.net/4Kv6w/17/

2012-01-14 19:45:14

嘿，我假設你正在嘗試動畫的變化。如果是這種情況，您可能會使用CSS轉換而不是轉換獲得更好的結果。我已經創建了一個小提琴讓你看到併爲自己嘗試。

基本上，我有一個js事件監聽器監聽當文本框獲得焦點。然後我改變js中的寬度，並且轉換處理動畫。希望這會照顧你的問題。

2012-01-12 20:33:23

感謝您的回覆！我所擁有的是一個包含多個輸入框的div標籤，需要使用iPad上的pinch事件來縮放。如果我改變每個輸入框的實際寬度和高度，它根本就不平滑。我得到一個平穩的捏縮放體驗的唯一方法是使用css轉換。 – 2012-01-14 18:37:38

是的，記住CSS轉換是硬件加速的。如果您正在尋找縮放功能，那麼您需要監聽手勢並使用過渡，可以將寬度更改爲手勢末尾處的輕觸之間的差異。 – 2012-01-15 14:41:11

這是一個很好的觀點。我將它與轉換工作聯繫在一起，但使用CSS轉換可能是一個很好的選擇。謝謝。 – 2012-01-16 23:39:48

回答