Draggable should compensate for transform: scale on parent element

[Niels-NTG]

Hello,

For our webapp has a feature which allows the user to "present" their content for a big screen. For this we apply this CSS

.container {
    --scale-factor: 1;

    @media (min-width: 1440px) {
        --scale-factor: 1.1;
    }

    @media (min-width: 1920px) {
        --scale-factor: 1.4;
    }

    @media (min-width: 2560px) {
        --scale-factor: 1.9;
    }

    @media (min-width: 3840px) {
        --scale-factor: 2.1;
    }

   .content {
       transform: scale(var(--scale-factor));
   }
}

Any instance of draggable, sortable and droppable that is a direct or indirect child of .content doesn't look quite right if --scale-factor is not equal to 1. When dropping items in the sortable it drops the dragged item at the expected position, but the position of the "helper" element does not stay attached to the cursor's position. See images below:

The draggable. Items have containment on the direct parent element and I use helper: 'original'.

When starting to drag the first item, the top attribute of the helper is multiplied by the scaling of a parent element, resulting in the helper item (in red) being offset from my cursor.

The distance from the cursor and the helper element gets bigger the further down the list I go.

The discrepancy between jQuery UI being able to figure out the correct position of the drop target but not the position of the helper suggests to me there is a bug in how the translation of the helper is calculated. Maybe this can be fixed or an option can be added to the API for scale, so jQueryUI can adjust the positioning of the helper accordingly.

Observed with:

• jQueryUI version 1.13.2 and 1.13.3
• Chrome v125 and macOS Safari 17.5

[mgol]

Thanks for the report. Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex and contain tests.

I suspect issues like that would be too big to fix at this stage of the project.