Resizable: with helper, dragging horizontally or vertically only reduces opposite direction by 1px

[lukepage]

reproduced using demos page.

​http://jqueryui.com/resizable/#helper

At least in modern chrome, modern firefox and IE10.

Resize up and down continually and you will see the width shrink by 1px per operation. Resizing the width continually and the height shrinks. Use the horizontal only/vertical only handles.

This does not happen when also using a grid.

Cause seems to be the following code

​https://github.com/jquery/jquery-ui/blob/1.11.3/ui/resizable.js#L683

which shrinks the width/height by 1px and then because that dimension cannot be changed, causes the size to be decreased by 1. I haven't figured out why you decrement by 1px (perhaps a comment would be useful?) but not taking away 1px when resizing in a fixed dimension appears to fix the problem, I just don't know the implications of it.

I found this possibly related issue: ​http://bugs.jqueryui.com/ticket/7271 which appears to be the opposite effect and only in IE7/IE8.

[tj.vantoll]

This regressed in 1.10.0.

Here's it working in 1.9.2: ​http://view.jqueryui.com/1.9.2/demos/resizable/helper.html Here's it failing in 1.10.0: ​http://view.jqueryui.com/1.10.0/demos/resizable/helper.html

The last commit to touch the line of code you reference landed in 1.10.0, which seems pretty suspicious: ​https://github.com/jquery/jquery-ui/commit/d73edfff.

[eXaminator]

We also noticed this bug today. A fix would be very welcomed as this can really break things.

Here's a small function that we use as a temporary fix, maybe it helps someone else. Thanks for the tip with the grid.

It won't help with elements that can be resized in both directions, but then 1 pixel difference might not be a big problem anyway.

function gridFix(handles) {
    var isHorizontallyResizable = handles.indexOf('e') >= 0 || handles.indexOf('w') >= 0,
        isVerticallyResizable = handles.indexOf('n') >= 0 || handles.indexOf('s') >= 0,
        grid = [2, 2];

    if (isHorizontallyResizable) {
        grid[0] = 1;
    }

    if (isVerticallyResizable) {
        grid[1] = 1;
    }

    return grid;
}

elem.resizable({
    "handles": handles,
    "helper": true,
    "grid": gridFix(handles)
});

[Scott González]

Resizable: Remove mysterious helper dimension adjustments

Fixes #11113 Closes gh-1615

Changeset: 7df2f1905a1ec4727f00451f8d794aeb35ec4159