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/