3

我正在使用select2 jQuery 选择框替换，但我遇到了 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);
}

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

4

1 回答 1

3

这是 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/

于 2012-11-06T05:22:59.223 回答