Skip to main content

Bug Tracker

Side navigation

#8515 closed bug (invalid)

Opened March 13, 2011 08:31PM UTC

Closed July 25, 2012 12:50AM UTC

Animate hiding contained borders

Reported by: leo@banyanbranch.com Owned by:
Priority: low Milestone: 1.next
Component: effects Version: 1.5.1
Keywords: Cc:
Blocked by: Blocking:
Description

Click on "go" on...

http://jsfiddle.net/kG3dD/

Repro'd on jquery v1.5.1 and 1.4.2.

Two nested divs of the same size, with inner set to 100%. Inner div is yellow with a blue border. Animating the size of the outer div clips the bottom and right blue border during animation, and then restores them when done.

I'd expect the blue border to remain in tact during the animation. Maybe this is deliberate for some other reason, but the behavior certainly seems buggy.

Attachments (0)
Change History (5)

Changed March 14, 2011 02:48PM UTC by rwaldron comment:1

component: unfiledeffects
owner: → gnarf
priority: undecidedlow
status: newassigned

Changed March 14, 2011 06:10PM UTC by gnarf comment:2

_comment0: This bug doesn't surprise me much, http://jsfiddle.net/gnarf/kG3dD/1/ \ \ If you take a look at that fiddle, you'll see that the outer container is applied an {{{ overflow: hidden }}}... This causes the inside box to fall outside because {{{width: 100%}}} doesn't take into account the borders on the element. \ \ See also http://jsfiddle.net/gnarf/kG3dD/2/1300128459359905

This bug doesn't surprise me much, http://jsfiddle.net/gnarf/kG3dD/1/

If you take a look at that fiddle, you'll see that the outer container is applied an

 overflow: hidden 
... This causes the inside box to fall outside because
width: 100%
doesn't take into account the borders on the element.

See also http://jsfiddle.net/gnarf/kG3dD/3/ for a "working" version of your fiddle...

Changed March 22, 2011 11:02PM UTC by leo@banyanbranch.com comment:3

In the simplified example, it's easy to do the math yourself on the boxes and make them fit. In the real world where this came from that doesn't work.

Adding .css('overflow', 'visible') after the .animate() call is a fairly good workaround, i.e. http://jsfiddle.net/q3j3R/

Changed May 24, 2011 06:53AM UTC by gnarf comment:4

owner: gnarf
status: assignedopen

You could also just use

 box-sizing: border-box 
where supported... https://developer.mozilla.org/en/CSS/box-sizing

Changed July 25, 2012 12:50AM UTC by dmethvin comment:5

resolution: → invalid
status: openclosed

We can't do anything about this, it's the default CSS box model. As gnarf says, you could use box-sizing: border-box when possible.