3

select2 jQuery 選択ボックスの置き換えに取り組んでいますが、CSS Transforms に問題があります。

基本的に、transform と font-size のプロパティを増やすボタンをページに用意しました。変換が 1.25 の場合、選択ボックスからのドロップダウンは位置がずれています。

私の jsFiddle テスト 1 (デフォルトのズーム): http://jsfiddle.net/ugPmm/1/

私のjsFiddle Test 2（拡大ズーム付き）： http://jsfiddle.net/wCALL/2/

テスト 2 では、ドロップダウン メニューが正しく配置されていないことがわかります。

私がCSSで行っているページの変更は次のとおりです。

.zoom-largest {
  font-size: 18px; }

body.zoom-largest {
    -o-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
}

ドロップダウンの位置が正しくない原因は何ですか?

4

1 に答える 1

3

これは、css変換が適用された要素のオフセットをjqueryが計算する方法のバグです。Ttは、変換されていないピクセル値を返す必要がありますが、変換されたピクセル値を計算して返します。

この問題に関するjqueryのバグチケットは次のとおりです：http：
//bugs.jquery.com/ticket/8362

スタックオーバーフローの説明とオフセットの問題の解決策は次のとおりです
。WebkitとjQueryのドラッグ可能なジャンプ

そのため、select2 jqueryプラグインは間違ったオフセット値を取得し、ドロップダウンを間違ったピクセル値で配置します。

私たちにできることは、select2プラグインのオフセット呼び出しを置き換えて、バグをハックリに修正することです。

これを置き換えます（行986）：

var offset = this.container.offset(),

これとともに：

var offset = { top: this.container[0].offsetTop, left: this.container[0].offsetLeft },

デモ： http：
//jsfiddle.net/wCALL/3/

于 2012-11-06T05:22:59.223 に答える