Opened 2 years ago

Closed 19 months ago

Last modified 19 months ago

#11113 closed bug (fixed)

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

Reported by: lukepage Owned by:
Priority: minor Milestone: 1.12.0
Component: ui.resizable Version: 1.10.0
Keywords: regression Cc:
Blocked by: Blocking:

Description

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.

Change History (4)

comment:1 Changed 2 years ago by tj.vantoll

Keywords: regression added
Status: newopen
Version: 1.11.31.10.0

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.

comment:2 Changed 2 years ago by 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)
});

comment:3 Changed 19 months ago by Scott González

Resolution: fixed
Status: openclosed

Resizable: Remove mysterious helper dimension adjustments

Fixes #11113 Closes gh-1615

Changeset: 7df2f1905a1ec4727f00451f8d794aeb35ec4159

comment:4 Changed 19 months ago by Scott González

Milestone: none1.12.0
Note: See TracTickets for help on using tickets.