jquery - Select2 和 CSS 转换 : dropdown menu is off position

Question

我正在使用 select2 jQuery select box replacement ，但我遇到了 CSS 转换问题。

基本上，我在页面上有一个按钮可以增加 transform 和 font-size 属性。当变换为 1.25 时，选择框的下拉菜单处于关闭位置。

我的 jsFiddle 测试 1(默认缩放): http://jsfiddle.net/ugPmm/1/

我的 jsFiddle 测试 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);
}

是什么导致下拉列表的位置不正确？

Answer 1

这是一个关于 jquery 如何计算应用了 css 转换的元素的偏移量的错误。 Tt 应该返回未转换的像素值，但它会计算并返回转换后的像素值。

这是一个关于这个问题的 jquery bug ticket:
http://bugs.jquery.com/ticket/8362

这里有stackoverflow的解释和偏移问题的解决方法:
Webkit and jQuery draggable jumping

因此 select2 jquery 插件获取了错误的偏移值并使用错误的像素值定位下拉列表。

我们可以做的是替换 select2 插件中的偏移量调用来 hackily 修复错误:

替换这个(第 986 行):

var offset = this.container.offset(),

有了这个:

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

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