ui.size not true to size of resizable

I recently had some major headaches because child elements within my resizable container would often and pretty randomly burst out of alignment for no apparent reason. I managed to replicate the problem in the following, trivial piece of code.

var t1= $("<div>")

.appendTo("body")

.css({

"background": "white",

"border": "1px solid black",

"height": "100px",

"width": "100px"

})

.resizable()

.bind( "resize", function(e,ui) {

if (!ui) return false;

t2.css({

"height": ui.size.height,

"width": ui.size.width

});

});

var t2=$("<div>")

.appendTo(t1)

.css({

"background": "red",

"border": "none",

"height": "100%",

"position": "relative",

"width": "100%"

});

This code produces a red box inside a resizable white box. The red box should cover the white box at all times. This is done here by intercepting the resize event (whereby defeating the DOM's usual 100% height/width automatism). The resize handler simply assigns the supposedly new size of the resizable to the inner box. Try repeatedly to resize the white box in any browser of your choice. At some point, the red box will be out of alignment by 1+ px, either at the bottom or the right. I've seen this misaligned by as much as 5px !!!

PS: You might wish to note the curious "if(!ui)return false;" statement inside the resize handler. I had to put this there for the benefit of IE6 which would spuriously receive these resize events w/o any ui attached :-(