Select2 and CSS Transforms: dropdown menu is off position

Question

I'm working with the select2 jQuery select box replacement, but I'm having an issue with CSS Transforms.

Basically, I have a button on the page that increases the transform and font-size properties. When the transform is 1.25, the dropdown from the select box is off position.

My jsFiddle Test 1 (with default zoom): http://jsfiddle.net/ugPmm/1/

My jsFiddle Test 2 (with a larger zoom): http://jsfiddle.net/wCALL/2/

In the Test 2, you can see the dropdown menu does not position itself correctly.

The page modifications that I'm making in CSS are:

.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);
}

What is causing the incorrect position of the dropdown?

score 3 · Accepted Answer · edited May 23 '17 at 12:15

This is a bug with how jquery calculates offset on elements that have had css transform applied to it. Tt should return the non-trasformed pixel values but it calculates and returns the transformed pixel values.

Here is a jquery bug ticket on the issue:
http://bugs.jquery.com/ticket/8362

Here is a stackoverflow explanation and solution to the offset problem:
Webkit and jQuery draggable jumping

So the select2 jquery plugin gets the wrong offset value and positions the dropdown with the wrong pixel values.

What we can do is replace the offset call in the select2 plugin to hackily fix the bug:

Replace this (line 986):

var offset = this.container.offset(),

With this:

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

Demo:
http://jsfiddle.net/wCALL/3/

Select2 and CSS Transforms: dropdown menu is off position

1 Answers1