Select2和CSS轉換：下拉菜單處於關閉狀態

Question

我正在使用select2 jQuery select box replacement，但我遇到了CSS轉換問題。

基本上，我在頁面上有一個按鈕，增加了變換和font-size屬性。當轉換爲1.25時，選擇框的下拉菜單處於關閉位置。

我的jsfiddle測試1（默認縮放）： http://jsfiddle.net/ugPmm/1/

我的jsfiddle測試2（具有更大的變焦）： http://jsfiddle.net/wCALL/2/

在Test 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); 
} 

是什麼原因造成的下拉菜單的位置不正確？

Answer 1

這是jquery如何計算已應用css變換的元素的偏移量的錯誤。 Tt應返回未轉換的像素值，但它會計算並返回已轉換的像素值。

這裏是在這個問題上一個jQuery錯誤門票：
http://bugs.jquery.com/ticket/8362

這裏是一個計算器的解釋和解決方案，以彌補問題：
Webkit and jQuery draggable jumping

所以選擇2 jQuery插件可能得到錯誤的偏移值並使用錯誤的像素值定位下拉列表。

我們所能做的就是替換選擇2的補償調用插件來hackily修復bug：

替換此（行986）：

var offset = this.container.offset(), 

有了這個：

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

演示：
http://jsfiddle.net/wCALL/3/