jqueryjquery-uicss-transformsjquery-ui-selectable

jQuery UI selectable css transform issue

I have a strange bug concerning the jQuery UI selectable. If I use a transform (scale + translate) within the selectable container, the lasso seems to be incorrect for selecting objects. Visually the lasso works perfecly!

Here is my coding example: Fiddle

Working case:

enter image description here enter image description here

Not working case:

enter image description here

Apparently this is a limitation of jQuery UI who is disregarding CSS-transformations in functions like offset(). In jQuery UI I found the part of the selectable where the calcualtion is being made for selecting items, but I can't seem to adjust it in a correct way:

_create: function() {
        var that = this;

        this._addClass( "ui-selectable" );

        this.dragged = false;

        // Cache selectee children based on filter
        this.refresh = function() {
            that.elementPos = $( that.element[ 0 ] ).offset();
            that.selectees = $( that.options.filter, that.element[ 0 ] );
            that._addClass( that.selectees, "ui-selectee" );
            that.selectees.each( function() {
                var $this = $( this ),
                    selecteeOffset = $this.offset(),
                    pos = {
                        left: selecteeOffset.left - that.elementPos.left,
                        top: selecteeOffset.top - that.elementPos.top
                    };
                $.data( this, "selectable-item", {
                    element: this,
                    $element: $this,
                    left: pos.left,
                    top: pos.top,
                    right: pos.left + $this.outerWidth(),
                    bottom: pos.top + $this.outerHeight(),
                    startselected: false,
                    selected: $this.hasClass( "ui-selected" ),
                    selecting: $this.hasClass( "ui-selecting" ),
                    unselecting: $this.hasClass( "ui-unselecting" )
                } );
            } );
        };
        this.refresh();

        this._mouseInit();

        this.helper = $( "<div>" );
        this._addClass( this.helper, "ui-selectable-helper" );
    },

Did anyone experience this issue before? Is there a fix, workaround or core adjustment known?

Solution

  • I found out the solution by myself and amended the jsFiddle.

    $fixedRect = $(this)[0].getBoundingClientRect();

    I marked the changed jQuery UI core code in red.

    enter image description here