5

次の CSS 変換を HTML 入力ボックスに適用しました。

-webkit-transform: scale(.5);

表示領域がいっぱいになるまで入力ボックスにテキストを入力すると、キャレットは入力の端を超えて非表示になります。通常、入力するとキャレットとテキストがスクロールします。

キャレットが事前にスケーリングされた入力の幅になると、テキストは最終的にスクロールを開始します。テキストをスクロールするタイミングを計算するときに、ブラウザがスケーリングを無視しているようです。

これは WebKit ブラウザーのみの問題です (Chrome と iPad でテスト済み)。-moz-transform に相当するものは、FireFox で正常に動作します。ズーム プロパティは Webkit では正常に機能しますが、iPad でスケーリングするときは十分に滑らかではないため、実際には自分のプロジェクトでは使用できません。

ここで例を見ることができます: http://jsfiddle.net/4Kv6w/

最初の入力ボックスは -webkit-transform スケーリングです。2 番目のボックスは、ズーム セットです。3つ目は普通です。

どんな助けでも大歓迎です。

編集- -webkit-transform を使用して入力ボックスを左に移動することにより、スケーリングなしで問題を取得することもできます。例を次に示します: http://jsfiddle.net/4Kv6w/15/

4

2 に答える 2

2

CSS変換を使用して入力ボックスを左に移動すると、WebKitにバグがあるようです。入力ボックスを縮小すると、基本的に右端が左に移動します。これが問題の発生方法です。

私にとっての回避策は、入力ボックスを左側に配置することでした。

left: -2000px;
position: absolute;

次に、CSS変換を使用して元に戻します。

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

ここで例を見ることができます：http：//jsfiddle.net/4Kv6w/17/

于 2012-01-14T19:45:14.817 に答える
1

変更をアニメーション化しようとしていると思います。その場合は、変換の代わりに CSS トランジションを使用すると、おそらくより良い結果が得られます。フィドルを作成しましたので、実際に見て試してみてください。

jsfiddle

基本的に、テキスト ボックスがフォーカスを取得したときにリッスンする js イベント リスナーがあります。次に、js で幅を変更すると、トランジションがアニメーションを処理します。うまくいけば、これで問題が解決します。

于 2012-01-12T20:33:23.740 に答える