jQuery resize on elements that have been positioned with css don't resize correctly in chrome

I've been playing with jquery-ui resizable and have been testing mainly in chrome. So what I have is a "main" window that is designed to be resizable and draggable, but situated at the bottom right of the screen by default.

#main {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 300px;
   height: 200px;

However the resizing portion of the code has been giving me trouble, after 2 days of playing with my code my friend loaded the page and said it worked for him. I didn't believe him and tried it myself, and it wouldn't work. Then he told me he was using Firefox, so I tried there and the code executed perfectly. I'm trying to go for as much support as possible, and really want it to work perfectly in chrome as well. The code I'm using is pretty basic, and I don't think there's a problem with how I execute it.

// $("#main").draggable({handle: "h1:first-of-type", containment: "parent"});
    handles: "n,s,e,w",
    maxWidth: 500,
    minWidth: 100,
    minHeight: 50, containment: "parent"

However, I do think this is a problem with jQuery and chrome, because if you add the "draggable" and drag the window first the resizing works perfectly. I assume dragging is setting some variable that resize isn't doing, however I couldn't tell the difference while debugging the elements themselves. I assume the issue occurs because of the "bottom" and "right" css attributes that are applied to "main."

I'm thinking jQuery is failing to do some sort of computing when executing their "resize" code, which exists in the "draggable" code. However I'm not familiar enough with their code to even tell what's different, if it's even a problem in their code.

I have created a jsfiddle to demonstrate the problem, for simplicity I commented out the draggable component from the fiddle (use Google chrome for specific case): http://jsfiddle.net/feildmaster/t4h7x594/

So now I ask, do you think the problem I have is with my own code, jQuery, or chrome? Is it fixable on my own end? Should I toss this issue over to jQuery themselves? Are you guys able to find the solution?

I'll accept any well explained answer, so long as it makes sense. Hell, I'm still not sure if I should even be asking this question here.

Thanks -Alan


Okay, I found out that it is a 7 year old bug with jQuery. I suppose I should have looked there first.


Having the exact same problem on a project im working on.

It all works fine in FireFox, but when i test my code out in chrome the resizing breaks for the box situated at the bottom of the page.

Maybe its possible to programatically trigger a small draggable event to make the bug go away?

Need Your Help

Highcharts csv data loading

javascript jquery csv highcharts socrata

I'm trying to load csv data for a highcharts basic column chart.