#8960 closed bug (duplicate)

Opened January 14, 2013 11:36AM UTC

Closed January 14, 2013 11:34PM UTC

Resizable shrinks a little on start of resize if border-box CSS used

Reported by: stevegrove Owned by:
Priority: minor Milestone: 1.10.0
Component: ui.resizable Version: 1.9.2
Keywords: Cc:
Blocked by: Blocking:
Description

This has been raised several times before and closed as not reproducible - so I have included a JSFiddle (http://jsfiddle.net/aF9HX/3/) that shows the problem occurs when you have "box-sizing: border-box;" and its browser specific variants enabled in your CSS.

This was the original bug report I found which in teh comments mentions that the border-box might be the reason:

http://bugs.jqueryui.com/ticket/4152

And a later one concerning the same problem:

http://bugs.jqueryui.com/ticket/5231

Which was rejected due to this fiddle:

http://jsfiddle.net/tj_vantoll/aF9HX/.

So using the above knowledge the following JSFiddle (derived from the above) shows the problem - when you start to resize the div (or whatever) shrinks a fraction which is very annoying and especially so when grid is turned on. The only difference between the fiddles is the extra CSS to turn on the boorder-box and a grid option on the resizable (not necessary for the problem but highlights its impact)

http://jsfiddle.net/aF9HX/3/

Attachments (0)
Change History (1)

Changed January 14, 2013 11:34PM UTC by tj.vantoll comment:1

resolution: → duplicate
status: new → closed

Duplicate of #8932.Hi stevegrove,

Thanks for taking the time to contribute to the jQuery UI project. I verified and reduced your test case - http://jsfiddle.net/gcBU6/. This is the same issue as #8932 but I'm going to expand that issue to include the 

border
per your test case. Change 
border
to 
outline
and you can see that the example works as expected.