Select2 和 CSS 变换：下拉菜单处于关闭位置答案

【问题标题】：Select2 and CSS Transforms: dropdown menu is off positionSelect2 和 CSS 变换：下拉菜单处于关闭位置
【发布时间】：2012-10-23 10:50:42
【问题描述】：

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

基本上，我在页面上有一个按钮，可以增加转换和字体大小属性。当变换为 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);
}

是什么导致下拉菜单的位置不正确？

【问题讨论】：

标签： jquery css transform

【解决方案1】：

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

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

这里是stackoverflow的解释和offset问题的解决方法：
Webkit and jQuery draggable jumping

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

我们可以做的是替换 select2 插件中的 offset 调用来修复错误：

替换这个（第 986 行）：

var offset = this.container.offset(),

有了这个：

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

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

【讨论】：